Home › Forums › Gravida Support › Mobile site layout
- This topic has 5 replies, 2 voices, and was last updated 6 years, 11 months ago by
Forum Moderator.
-
AuthorPosts
-
October 3, 2016 at 3:27 pm #48315
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/
October 4, 2016 at 6:14 am #48366Hi 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,
DaveOctober 4, 2016 at 7:48 am #48373Hi Dave,
Thank you for replying. Now, how would I change the CSS code in media queries to allow for a more responsive mobile layout?
October 4, 2016 at 11:35 am #48400Hi 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,
DaveOctober 5, 2016 at 9:04 am #48555Hi 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,
KazOctober 5, 2016 at 9:37 am #48559Hi 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 -
AuthorPosts
- You must be logged in to reply to this topic.