how to use the same heading design on Desktop and Mobile

Solved
surppot
New Member
6 0 0

hello guys!!

I would like to use the same Heading design for Desktop and Mobile.

I need the Mobil version to look like the Desktop one (the title and button centered in the middle of the photo and not outside)

HEADING.png

https://www.surppot.com/

password: meudru

I hope you can help me!!

best,

 

0 Likes

This is an accepted solution.

@media only screen and(max-width:768px){
.hero__adapt-text-wrap.wrapper {
    position: absolute;
    left: 0;
    left: 0;
    right: 0;
    color: #fff;
    vertical-align: middle;
    margin-top: 23%;
    top: 0;
    font-size: 10px;
    top: 0bo;
    bottom: 0;
    text-align: center;
}
a.hero__cta.btn {
    font-size: 14px;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Note : If your file is having already this media then add there. No need to add extra 768px media

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
surppot
New Member
6 0 0

thank you so much!! works great!

0 Likes