Docs

[tiv1]

Hi guys,

We’re having some major layout issues of the site we are developing on mobile phone (android) devices.
On desktops and ipads, all is looking great now. Is there some css code we have to use in order to ensure we don’t have the following problems (attaching screen shots to show you problems):

1. Rows/section of a page overlapping
2. Sidebar overlapping with main page content
3. Main menu bar drop-down not displaying fully

The domain is aisc.ac.cy

Would really appreciate your help as we are on the final stage of the project and ready to submit it once this mobile issues are sorted.

Thanks as ever. Great theme and even greater support!

[Joao]

Hi 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

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

Thanks

Joao

[tiv1]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the custom CSS:

@media (max-width: 767px) {
    #x-section-1 .x-column {
        height: auto !important;
    }
}

Hope this helps.

[tiv1]

I think this has sorted the problem, thanks so much.

One other more minor problem. On mobiles, some of the text headings (h5 or h6) are not displaying properly in the text body. The letters are bunching up and overlapping.

An example url is this one: http://www.aisc.ac.cy/about-us/facilities/athletics/

If you scroll down, you will see the blue headings are having layout issues on mobile devices.
Actually, some of them are also not displaying properly on ipads/desktops also.

I tried to adjust the spacing of the headings but something is overriding the changes it seems.

Appreciate your help with this.

Many thanks as always.

[Rue Nel]

Hello There,

Thanks for the updates! To resolve the custom headlines on smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site h4, .site h5, .site h6, 
.site .h4, .site .h5, .site .h6 {
    line-height: 1.0;
}

Hope this helps. Please let us know how it goes.

[tiv1]

Wonderful! Thanks a million.

Really appreciate your quick reply and solutions, guys.

Recommending this theme to everyone!

[Rue Nel]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts