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

[Peterial]

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/

 

   

[aBox_Agency]

Hello @Peterial

Please share your issue here.

You want to revamp it for Mobile view ?

Thank You

[Peterial]

Yea forsure if its possible!

[Made4uo-Ribe]

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;
    }
}

• And Save. 
• Result:
•     

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

[Peterial]

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

[Peterial]

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