reverse the order on mobile

[Andrea Albertin]

Hi,
I’m working with the gbhotel template.
I need the columns in the “Our Services” section on the home page to reverse the order on a smartphone, so that you see the text first and then the tiles with the icons.

Thank you

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.skt-blocks-ifb-title-wrap {
    top: -80px;
    position: relative;
}
.skt-blocks-ifb-image-icon-content.skt-blocks-ifb-imgicon-wrap {
    bottom: -40px;
    position: relative;
}
}

Regards,
Dave

[Andrea Albertin]

Hi,
I tried it, but it doesn’t work.

This is my test page: https://demositeweb.free.nf/about/

Refer to sections that have columns showing images on the left and text on the right on the desktop, such as “Title 1” and “Title 3.”

Now, when I open the page from mobile, the images appear first and then the text.
I want to get the opposite, first the text and then the images, like the section with “Title 2”

On html I used this class:
@media (max-width: 767px) {
.row-reverse-sort-sm {
display: flex;
flex-direction: column-reverse;
}
}

Thanks again

[Sonnal S Sinha]

Hi,

Kindly send us your URL of the site and WordPress admin details (Username & Password) via email:[email protected] Please mention this forum URL while replying so that we understand what needs to be done.

We’ll check and revert back to you.

Regards,
Dave

[Andrea Albertin]

Hi,
I sent the email.
Regards

[Sonnal S Sinha]

Hi,

Given login details isn’t working. We are getting this message.

https://nimb.ws/hdxCW6

Regards,
Dave

[Andrea Albertin]

Hi,
now it seems ok.

Try it please.

[Sonnal S Sinha]

Hi,

Issue have been resolved on mobile screen. kindly check and confirm.

https://demositeweb.free.nf/about/

Regards,
Dave

[Andrea Albertin]

Hi Dave,
I saw the modification and it works. Thank you!

I made a small change to the class. By doing so, I just need to add the “gb-column-reverse” class in the ADDITIONAL CSS CLASS(ES) of the section where the columns must be reversed on mobile:

@media screen and (max-width:767px) {
.gb-column-reverse .responsive-columns-inner-wrap.responsive-columns-columns-2 {
display: flex;
flex-direction: column-reverse;
}
}

Do you have any objections or is my modification correct?

Thanks again for the support

[Sonnal S Sinha]

Hi,

Yes, your modification is correct👍

Regards,
Dave

[Andrea Albertin]

Fine.

Thanks,
Regards

[Sonnal S Sinha]

Hi,

If you found our service good kindly review us here: https://www.trustpilot.com/review/sktthemes.org

Regards,
Dave

[Author]

Posts