Solved

Move Button only on Phone view to a certain spot.

BERNAT-LASDUNAS
Tourist
16 0 3

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/

Screen Shot 2023-10-05 at 5.30.22 pm.png

 

Accepted Solution (1)

oscprofessional
Shopify Partner
15895 2377 3082

This is an 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;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
7678 1493 1496

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

Screenshot 2023-10-05 at 13.47.27.png

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

laddisahsi
Shopify Partner
382 38 40

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>

 

laddisahsi_0-1696488823621.png

 


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


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


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

topnewyork
Navigator
259 27 38

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

 

topnewyork_0-1696489130768.png

 

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

oscprofessional
Shopify Partner
15895 2377 3082

This is an 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;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

websensepro
Shopify Partner
1040 144 149

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:

websensepro_0-1696490972082.png

 

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

 

Best Regards,
Websensepro

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

eFoli-Marvic
Shopify Partner
223 40 39

@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;
}
}
Marvic | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants