Move Button only on Phone view to a certain spot.

[BERNAT-LASDUNAS]

Hi, How are we

I'm struggling bringing the Button "sunnies" on the center right in between images where I placed the black rectangle only on phone view. On computer it's well placed already.

Thanks for your time and help

Url: https://www.lasdunasbyron.com/

[Dan-From-Ryviu]

Hi @BERNAT-LASDUNAS 

You can do that by adding this CSS code to Custom CSS of that section 

@media screen (max-width: 749px) {
.banner__content { align-items: flex-end !important; }
.banner__buttons { top: 30px !important; }
}

 

[vpsbohra]

Hi @BERNAT-LASDUNAS 

You can follow the following steps:

1. Please go to the Online Store
2. Then Edit Code
3. Please find the theme.liquid file
4. And add the following code in theme.liquid file above the </head> tag

<style>
@media screen (max-width: 767px) {
.banner__content { align-items: flex-end !important; }
.banner__buttons { top: 30px !important; }
}
</style>

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

[topnewyork]

Hi @BERNAT-LASDUNAS 

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above </body> tag

@media screen (max-width: 749px) {
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    padding-top: 67%;
}
}

[oscprofessional · Accepted solution]

Hello @BERNAT-LASDUNAS 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

#shopify-section-template--18894434730306__bde2c142-d58b-4297-8f39-a8e9bcc4acdd .banner__buttons {
    top: 14rem !important;
}

[websensepro]

Hi, @BERNAT-LASDUNAS.

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

@media (min-width:320px) and (max-width:767px) {

.banner__content {
    align-items: flex-end;
}
.banner__buttons {
    top: 30px;
}

}

Result:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Websensepro

[eFoli-Marvic]

@BERNAT-LASDUNAS 

 add this code to your base.css file.

Navigate to the online store >> Click edit theme code.

Now find base.css and paste the following code:

@media(max-width:980px){
.banner__content.banner__content--bottom-center{
    align-items: flex-start;
}
}