What Media Query to Use for Grid Columns in CSS

quakerfurniture · Member · May 25, 2017 at 8:39 pm
Copy link

Add topic to favorites
Hi it’s me again! On my home page below the slideshow I made three columns using <div style> in html, looks great on desktop and fine for tablet but I understand I need to use a @media query in custom css to make the columns responsive on mobile screens. But I’m not sure what css code to use, can someone educate me please?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 26, 2017 at 7:26 pm
Copy link
Hi, let’s see what you think with this. First off edit your page, switch to the HTML/Text tab in the editor and add a “my-col” class to each of those three divs you creates so they look like this.
<div class="my-col" style="width:30%;padding:0 10pt 0 0;float:right;">
Next add the following to the bottom of your custom CSS. This makes the three elements nearly full width and stacks them and centers the text in the quick links. Since the text is within the two images, it doesn’t center, which looks a bit odd, but if we leave the quick links section left aligned, it looks even more strange.
```
@media screen and (max-width: 600px) {
	.my-col {
		width: auto !important;
		padding-right: 0 !important;
		float: none !important;
		text-align: center !important;
		margin-bottom: 20px
	}
}
```
quakerfurniture · Member · May 26, 2017 at 8:29 pm
Copy link
Worked like a charm- thanks thesacredpath! I’m learning as I go and I appreciate everyone on the forums with helping me out!

Side note about the two images with text on top: I actually put the text as part of my photoshop image because I was getting tired of always trying to align my text with my image and on the image the text is flush-left. :)

We’ll see what the peanut gallery has to say about that, lol!
thesacredpath · Member · May 26, 2017 at 8:40 pm
Copy link
You are welcome. Let us know if the peanut gallery has additional questions. :)

No items found.