Docs

[shiccae]

Hello, I have an issue with how rows – each with two columns comprising an image and text – are being rendered on mobile (=<480px) displays.

I can provide the website section and, if necessary, access details in a private reply.

Thanks

[shiccae]

This reply has been marked as private.

[Paul R]

Hi,

Please refer to the link below.

https://community.theme.co/forums/topic/adapt-the-layout-in-mobile-view/#post-669737

Hope that helps.

[shiccae]

Hello Paul, I’m unsure it is the same problem. I have tried doing what is suggested in that link for one of the rows without success.

The rows and columns are actually overlapping each other, i.e. it is not just a matter of the order of the text and images. Could you take a look at the link in my second post? Thanks.

[Paul R]

Hi,

Sorry, your second posts was not yet posted when I replied.

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 767px) {
.home .x-column.x-sm {
    overflow: hidden;
    display: block;
    float: none;
    width: 100%;
    margin-right: 0;
    clear: both;
}

.home .x-section .x-container {
    clear: both;
    position: relative;
    float: none;
    display: block;
    overflow: hidden;
}
}

Hope that helps.

[shiccae]

Thanks, that has sorted out the overlapping issue being displayed. However, it has resulted in each of the text boxes being cut off by the image below (in mobile only).
Is there any way to solve this?
Just to note, I have the height of each of the rows set to 250px.

[Christian]

Hey there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[shiccae]

This reply has been marked as private.

[Christian]

You have HTML errors in your page (see attachment). Please remove all <font> tags in your content. Also, please remove the CSS given previously.

Thanks.

[shiccae]

Hello, I think I have removed all <font …> tags now, but the problem persists. Do you mean to remove all <font-size:…> tags also?

[shiccae]

That is the original problem of overlapping rows and columns remains.

[Christian]

Thanks. That is getting better. Now, update X and Cornerstone to the latest version. Go to Dashboard > Updates. It is strongly recommended to update WordPress also.

Let us know how it goes. Thanks.

[shiccae]

Hello, latest versions of WordPress, Cornerstone, and X have now been installed. Unfortunately, the problem remains.

[Joao]

Hi There,

Update this code:

@media (max-width: 767px) {
.home .x-column.x-sm {
    overflow: hidden;
    display: block;
    float: none;
    width: 100%;
    margin-right: 0;
    clear: both;
}

to this:

@media (max-width: 767px) {
.home .x-column.x-sm {
    overflow: hidden;
    display: block;
    width: 100%;
    margin-right: 0;
    clear: both;
}

Let us know how it goes,

Joao

[shiccae]

Hello, I’ve re-added the code and amended as above. However, the text sections are still being cut off. The full global CSS code is now as follows.

body .x-navbar .x-navbar-inner {
    padding-bottom:5px;
}

footer.x-colophon.top { padding: 0% 0; }

.x-feature-box-graphic i {
    font-size: 60px;
}
font {
    line-height: 25px;
}
@media (max-width: 767px) {
.home .x-column.x-sm {
    overflow: hidden;
    display: block;
    width: 100%;
    margin-right: 0;
    clear: both;
}

.home .x-section .x-container {
    clear: both;
    position: relative;
    float: none;
    display: block;
    overflow: hidden;
}
}

[Author]

Posts