Mobile site layout

[Kaz]

My Gravida Pro theme looks great on the desktop version but not on the mobile site.

On the mobile site:
1) The Header appears as broad as the slider image section.
2) The Home Featured Blocks appear aligned in a single column instead of horizontally as 4 columns.
3) In the other pages, the main body content and the page right-side widgets all appear in a single column too.

How do I get the mobile site to display the same layout as the desktop version, or at least display as a better responsive layout than the current?

My site is: http://i-smartsignaller.com/home/

[Sonal S Sinha]

Hi Kaz,

This is the default responsive view for the theme. You can check our demo as well. If you want to change the layout in mobile view then you have to change the CSS code in media queries.

Regards,
Dave

[Kaz]

Hi Dave,

Thank you for replying. Now, how would I change the CSS code in media queries to allow for a more responsive mobile layout?

[Sonal S Sinha]

Hi Kaz,

Kindly go to style.css you will find the media queries there like @media

You have to change the css code inside the media queries.

Regards,
Dave

[Kaz]

Hi Dave,

I see a few listings of “@media” withn the style.css file. If I want to reduce the Header banner length such that it appears shorter than the slider image section on the mobile site, which “@media” codes do I need to edit?

Regards,
Kaz

[Sonal S Sinha]

Hi Kaz,

You have to write your code within this media query

@media screen and (max-width: 29.938em) {
}

NOTE: Use !important at the end of the class.

Regards,
Dave

[Author]

Posts