Hi,
This is how my Image banner appears in the design view which is how I’d like it.
This is how it appears on my web browsers
Any idea why it’s appearing centre rather than left?
Site watchbits.co.uk
Theme: Dawn
Topic summary
A user encountered an issue where their image banner appeared centered on their live site despite being set to top-left alignment in the design view.
Problem Details:
- Banner displayed correctly (top-left) in the theme editor
- Appeared centered instead of left-aligned on the actual website
- Issue affected desktop view across web browsers
Solutions Provided:
Two community members offered CSS-based fixes:
- First approach: Add custom CSS code in
theme.liquidfile before the</head>tag - Second approach: Modify the main CSS file (main.css, base.css, style.css, or theme.css) by adding media query code targeting
.banner .banner__contentwithjustify-content: flex-startfor screens 750px and wider
Resolution:
The issue was successfully resolved using one of the provided CSS solutions. The user confirmed the fix worked as intended.
2 Likes
- Here is the solution for you @Mattgws
- Please follow these steps:
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- In theme.liquid, paste the below code before and press ‘Save’ to save it
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
Hi @Mattgws
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.
@media screen and (min-width: 750px) {
.banner .banner__content.banner__content--bottom-right {
justify-content: flex-start;
}
}
Amd Save.
Result:
let me know if you want more far right.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Thanks, that’s perfect