Goal: Move the image banner text to the left in the Shopify Sense theme and replicate Nudient.se’s behavior (two panels on desktop, single panel on mobile, responsive).
Attempts: CSS was suggested to set margin-left: 0 !important for the banner content selector (variations targeting .banner__content.banner__content–middle-left.page-width and with scroll-trigger). Edits were made in base.css.
Outcome: The changes did not take effect. The requester noted the logo and cart positions might be influencing layout, wanting text further left and cart further right. Screenshots were provided to illustrate.
Troubleshooting: One response emphasized correct code placement—paste the CSS near the end of base.css before the last closing bracket. Another suggested adding code in theme.liquid above , but no actual code snippet was provided.
Key terms: base.css is the theme’s main stylesheet; theme.liquid is the primary layout file where global scripts/styles can be added.
Status: Unresolved. No verified fix yet, and the responsive two-panel/one-panel behavior has not been implemented. Next steps likely involve confirming the correct selector and placement, or adjusting header layout CSS (logo/cart) and exploring section settings for responsive panels.
I would like to make it look like this - https://www.nudient.se/
Text needs to be moved to the left. Could someone help me?
I would also like to have the banner to work like above page - two pages when on desktop and one for mobile, being responsive.
https://1f097c-e6.myshopify.com/ - Password Testar
Hi @virregouda
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.banner__content.banner__content--middle-left.page-width {
margin-left: 0 !important;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @virregouda
This is Amelia from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.banner__content.banner__content–middle-left.page-width.scroll-trigger.animate–slide-in {
margin-left: 0 !important;
}
Hope that my solution works for you.
Best regards,
Amelia | PageFly
Hi, thanks for helping! Unfortunately this did not work for me. Do you have another solution I could try?
This did not work, maybe because logo is where it is? Would like to move all this more to the left. Same for cart, more to the right. See image;
I edit the code, please try it again. If still not working let me know. Thanks!
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Still won’t work, thank you tho!
Where did you add the code? base.css file?
correct
oh, You add it wrong. Must be paste before the last closing bracket. It should be like this.
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
This is Richard from PageFly - Shopify Page Builder App
Hi @virregouda Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag
Hope my solution will help you resolve the issue.
Best regards,
Richard | PageFly