Pique Theme: grid page display 2 instead of 3 on all device views

whitfrancene · Member · Mar 2, 2017 at 7:49 pm
Copy link

Add topic to favorites
I recently made my grid page template go from displaying three in a row to two with the code below (given to me by happiness engineer)
```
.post-65 article {
     float: left;
     width: calc((100% - 80px) / 2);
}
```
However, this does not translate into mobile view (I think tablet still looks okay) as it is definitely leaning more to the left. What do I add to get it to be centered and display two in a row on all device views?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 3, 2017 at 4:44 am
Copy link
Looking at things, at about 450px and narrower, with the two side-by-side, they become quite difficult to easily read since they are so narrow. What I would suggest is replacing the code you are using now with the following, which let’s things go back to a single column at 450px and narrower, and also floats the right one to the right so that the text between them isn’t so close together. Try this and test and see what you think.
```
@media screen and (min-width: 450px) {
  .post-65 article {
	 float:left;
	 width:calc((100% - 80px) / 2)
  }
	.post-65 article:last-of-type {
		float: right;
	}
}
```
whitfrancene · Member · Mar 3, 2017 at 4:12 pm
Copy link
That works great, thank you!!!
thesacredpath · Member · Mar 3, 2017 at 7:33 pm
Copy link
You are welcome.

No items found.