how to use the same heading design on Desktop and Mobile

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)


password: meudru

I hope you can help me!!




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: | Skype : oscprofessionals-87
New Member
6 0 0

thank you so much!! works great!