Website looks very bad on phone. But better in desktop Sense

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/

1 Like

Hello @Peterial

Please share your issue here.

You want to revamp it for Mobile view ?

Thank You

Hi @Peterial

Im not sure if this is what you want to fix, but check it.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. 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;
    }
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like

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

Header doesnt look the same on phone as on desktop. Desktop: The shop now should look the same on phone and it should be on the picture

and phone