Docs

[wsprague]

When using a mobile device my website has the section lines from the laptop view that separate the text from the image, but in mobile view everything is stacked. I just want the lines gone and just look cleaner.
sportingaconversation.com

Thank you

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:767px) {
    div#x-section-2,
    div#x-section-3,
    div#x-section-4 {
        background-image:none!important;
    }
}

Hope this helps – thanks!

[wsprague]

That did help! Thank you.

Also The view now on the mobile site is still a little weird, the text and pictures aren’t spaced evenly, is there a way to fix that?
And they don’t all go in order of Text – Picture; Text – Picture; Text – Picture. is there a way to fix that?

Thank you!

[Thai]

Hi There,

Please add the following CSS:

@media (max-width:767px) {
    .home #x-section-2,
    .home #x-section-3,
    .home #x-section-4 {
        padding-top: 0 !important;
    }
    .home #x-section-2 .h-custom-headline,
    .home #x-section-2 .h-feature-headline,
    .home #x-section-3 .h-feature-headline,
    .home #x-section-4 .h-feature-headline,
    .home #x-section-4 .h-custom-headline {
        margin-top: 0;
    }
}

Hope it helps 🙂

[wsprague]

This did reduce the space between everything but there are still two images in a row and then custom headline text and another custom headline text and then the third image. If possible I would like the 3rd section to have the headline and text above the picture. So Sections 2,3,4 all have Headline then Text then Image.

Thank you

[Rue Nel]

Hello There,

Thanks for the updates. The placement of the image, text and the headline is not that responsive. You need to edit your layout and re arrange it so that it will display as what you wanted on smaller screens. To do that, please check out this topic: https://community.theme.co/forums/topic/mobile-screen-size-layout/#post-826285

Hope this helps.

[wsprague]

Thank you for that link that topic helped.

Now that I used that though the lines are back in my mobile view in Section 3.
How do I need to change that first code in this thread?
Also on mobile view the text and images aren’t all spaced evenly apart and the space from first custom headline to nav bar is too large.
Is there a way to change this?

Thank you!

[Rad]

Hi there,

What lines? All I could see are background lines in section 1. Would you mind providing a screenshot of what you’re getting?

About the spacing, you have headlines within headlines, and that nested the spaces too. You don’t need custom headline shortcode within custom headline element. And please add mtn to your custom headline’s class input.

Thanks!

[wsprague]

In the mobile view there is now a line through the text, which is why I opened this thread originally.
How do I get rid of the line in the background of top section text?? See attached screen shot.

The short code in the custom headline adds the icon and makes it a link to another page, are you saying there a different way to do that so I don’t need shortcode??

I didn’t see the effects of mtn what does that do??

Thanks for help

[wsprague]

Also is there a way to change the space between custom headline in the screen shot above and the menu bar above it? and space from that first section to the next section?

Thanks!

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

@media screen and (max-width: 767px){
.home #x-section-1 {
    background: none !important;
}
.h-feature-headline {
    margin-top: 0;
}
}

For the detailed guide on CSS classes used in X theme please refer to this link https://community.theme.co/kb/css-class-index/

Cheers!

[Author]

Posts