Mobile site layout

Home Forums Gravida Support Mobile site layout

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #48315
    Kaz
    Participant
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: September 24, 2016

    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/

    #48366
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    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

    #48373
    Kaz
    Participant
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: September 24, 2016

    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?

    #48400
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    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

    #48555
    Kaz
    Participant
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: September 24, 2016

    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

    #48559
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.