Hello my website looks super off when on phone, wrong coloursr and placement. First one is desktop second is phone. Wbsite:https://b50d92-a2.myshopify.com/
Topic summary
Mobile layout renders with incorrect colors and misaligned elements compared to desktop, per shared URL and multiple screenshots (images are central to understanding the differences). The primary concern is the “Shop now” call-to-action and header styling/placement on phones.
A contributor provided theme CSS changes (added to the theme’s main/base/style/theme.css) using media queries (CSS rules that apply at specific screen widths):
- On max-width: 749px, make .banner__box transparent and absolutely positioned at the bottom.
- Make card/multicolumn backgrounds transparent.
- On min-width: 750px, align banner content to the bottom.
Initial result improved transparency and alignment (with provided before/after images). However, new issues surfaced on mobile:
- The “Shop now” button no longer matches the desktop design/position; the user wants it overlayed on the image as in the original desktop screenshot.
- Header appearance does not match desktop on phone.
Status: Partially resolved. Further targeted CSS for mobile is needed to replicate desktop button styling/overlay and to unify header styling across devices. No final solution or code adjustments for these remaining issues yet.
Hi @Peterial
Im not sure if this is what you want to fix, but check it.
- 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 only screen and (max-width: 749px){
.banner__box.content-container {
background: transparent;
position: absolute;
bottom: 0;
}
}
.banner__box.content-container {
background: transparent;
}
.card.card--card.card--media, .multicolumn.background-primary .multicolumn-card {
background: transparent;
}
@media screen and (min-width: 750px) {
.banner__content.banner__content--middle-center {
align-items: flex-end !important;
}
}
-
And Save.
-
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Yea forsure if its possible!
You fixed but now it looks bad this is how the shop button is built. So make the shop now look like in the first picture i provided












