grid page appearance

mkthumain · Member · Mar 18, 2015 at 5:35 pm
Copy link

Add topic to favorites
Hi there,
Can someone help to modify the appearance of my grid page to make appear two pages by row instead of three?
Thanks in advance,
ehab

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 18, 2015 at 7:16 pm
Copy link
Hi there, this is difficult to do given that the length (or lack of content shown in the pages in the grid) can mess up the alignments. You can add this to your custom CSS and see what I mean.
```
.grid {
    width: 470px;
    display: inline-block;
}
```
There would also be some additional CSS required, but you would first have to add content to all of them in order for us to see what would be needed exactly.
thesacredpath · Member · Mar 18, 2015 at 7:18 pm
Copy link
I just checked things on the Goran demo site with the code above, and it may be that we can’t get it to go only two columns.
mkthumain · Member · Mar 18, 2015 at 7:40 pm
Copy link
Look to the result. Works one aver two with the same text! May be it’s the photo size?
thesacredpath · Member · Mar 18, 2015 at 9:00 pm
Copy link
This is a bit complex, but add the following at the very bottom of your custom CSS and see what you think. I’ve not yet been able to get the page modules to center when it goes to one column at 1229px. I’ll keep looking at that though.
```
.grid:nth-of-type(2) {
    margin-right: 0;
}
.grid:nth-of-type(3) {
    clear: both;
    margin-right: 72px;
}
.grid:nth-of-type(4) {
    clear: right;
    padding-top: 0;
    border-top: none;
    margin-right: 0;
}
```
mkthumain · Member · Mar 19, 2015 at 8:57 am
Copy link
There is something like an espace between the third “Expérience” and the fourth page “Engagement”. No?
mkthumain · Member · Mar 19, 2015 at 9:03 am
Copy link
It worked my Happiness Engineer! I don’t know how to thank you man!
Look to the result of your input http://www.marketinghumain.com
thesacredpath · Member · Mar 19, 2015 at 6:58 pm
Copy link
Woohoo! Glad to have been of help. Add the following which will take the .grid section to full width at 1229px and narrower, which is when things go to a single column.
```
@media screen and (max-width: 1229px) {
	.grid {
		width: 100%;
	}
}
```
mkthumain · Member · Mar 19, 2015 at 8:21 pm
Copy link
Thanks a lot man. You are real helper! Vive My Happiness Engineer
thesacredpath · Member · Mar 19, 2015 at 10:11 pm
Copy link
You are welcome.

No items found.