- This topic has 9 replies, 4 voices, and was last updated 6 years, 9 months ago by Tom.
-
AuthorPosts
-
July 3, 2017 at 1:39 am #343267PHILIP
Hello Tom and co
I want to use columns, but only on screens larger than iPad portrait.
I couldn’t find an easy way to do this using the Lightweight Grid Columns plugin.I Googled: column classes
And found this page…
https://gist.github.com/studiopress/5700003I wrapped that CSS in a media query…
@media screen and (min-width: 769px) { CSS CODE GOES HERE }
In the provided HTML I changed the clearing div to this…
<div class="clear"></div>
To make space between rows I could use a hr tag: <hr />
This seems to work OK. But do you know of any reason anything might conflict?
I would not use the Lightweight plugin and the column class code on the same site.Thanks
Philip.July 3, 2017 at 3:04 am #343303Roberto EnriqueGeneratepress (and also the columns plugin) uses the unsemantic css framework. Try using their classes instead, it comprehends classes for mobile tablets and desktop and you should be covered using just that. No need to add more responsive classes for handling the collapse behavior of columns.
I usually start my generatepress custom css like this to have a little more control of what happens at any given breakpoint:
@media only screen and ( min-width: 1024px ) { /*Desktop Only Styles*/ } /*JUST FOR TABLETS*/ @media (min-width: 768px) and (max-width: 1024px) { /*Tablet Only Styles*/ } /*STYLES JUST FOR MOBILE*/ @media screen and (max-width: 768px) { /*Mobile Only Styles*/ }
July 3, 2017 at 5:27 am #343355PHILIPHello Roberto
Thanks for the reply.
I tried that originally but couldn’t find the CSS I needed to make iPad portrait stack and landscape to display the grid.
July 3, 2017 at 9:02 am #343454LeoStaffCustomer SupportCan you give this a shot?
<div class="grid-33 tablet-grid-100 mobile-grid-100"> Content here </div>
July 3, 2017 at 9:42 am #343485PHILIPHello Leo
Thanks for the code.
I tried it but the tablet setting covers BOTH portrait and landscape settings for iPad.I want to go to a single column on portrait view in iPad.
Sometimes three columns in the narrower portrait view looks too squished up for the page content I want to use.
July 3, 2017 at 10:26 am #343509TomLead DeveloperLead DeveloperYou would have to adjust the grid classes inside your own media queries. You can find specific media queries for each device here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
July 3, 2017 at 10:47 am #343526PHILIPThanks Tom
It was the grid classes that I couldn’t find, not the media queries.
Although the code I’ve got is based on Bootstrap it seems to work OK so I’ll use that unless I discover any problems.
July 3, 2017 at 11:45 am #343548TomLead DeveloperLead DeveloperAll of the built in classes can be found here: https://unsemantic.com/css-documentation#2-grid-classes
The bootstrap grid will absolutely work as well 🙂
July 3, 2017 at 12:54 pm #343593PHILIPThanks Tom that solves my problem.
July 3, 2017 at 7:51 pm #343740TomLead DeveloperLead DeveloperYou’re welcome 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.