Docs

[nickohorny]

Hi,

I am currently trying to achieve a grid layout similar to this website: http://www.pagasia.com/en/
If you squeeze in the browser you will note the rows always vertically line up neatly in their boxes, there is no fluid columns going up and down with the responsiveness.

On my current test page, I am unsure how to achieve this.
– http://proflexwhey.com/test-2/

As you can see squeezing the browser, the text box goes long, while the images shrink and the whole row is not neatly presented like in my desired example.
From looking, it seems as though they just use a break point to shrink the whole site down on smaller laptop widths, until it finally hits a mobile size and then it stacks.

How is it possible to achieve this result of a neat grid layout please? with all rows neatly aligning like a box. Thanks for your help.

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px){
.x-img {
    margin: 20px 0 0 0;
    width: 100%;
}
.x-column.x-sm {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
}
}

Let us know how this goes!

[nickohorny]

Thanks for the response,

it didn’t seem to change anything? I added the exact code as supplied. Thank you.

[Nico]

Hi There,

Would you mind sharing us your admin credentials so we could check you set up closer.

Don’t forget to set it as private reply.

Thanks.

[nickohorny]

This reply has been marked as private.

[Christopher]

Hi there,

Please enable ‘Marginless columns’ option for this row. Add image as column’s background, to do so add background-image: url("http://businesscardbangkok.com/wp-content/uploads/2014/06/2-405x600.png");background-size: contain;background-repeat: no-repeat;background-position: center center;background-color: #efefef; in column’s style field.

Hope it helps.

[nickohorny]

Hi, thanks but that option won’t work because I may have multiple images in a column.. eg/ http://businesscardbangkok.com/test/
This is only a test page to see how I can replicate a simple grid block look layout, the image used are just placeholders for now.

As mentioned, I am trying to replicate a neat grid look like so: http://www.pagasia.com/en/ as you can see by squeezing the browser the columns are not fluid and do not jump around in height, they all stay aligned neatly and this never changes, so all inline.. I think this site may just use a break point to shrink the whole thing down rather than stacking?

I just want to know how I too can make my row the same neat layout, rather than when responsive it jump height all the time. So basically have all my columns in a row the same height, aligned nicely.

Thank you for the help.

[Christopher]

Hi there,

Provided example site doesn’t use X and it uses media query to resize containers and columns for different screen sizes.
What you’re trying to achieve requires custom development which would be outside the scope of our support.

Thanks for your understanding.

[nickohorny]

Hi,

Ok, Thank you for letting me know.

[nickohorny]

Sorry one last question,

Is there instead, just a simple way to create say just 2 break points, so like I design the page neatly first in full width, with all columns matching neatly, then on a smaller laptop screen the whole page just shrinks everything in view down rather than fluidly expand/decrease columns?

A bit like how the revolution slider settings are set for on different devices?

Thanks.

[nickohorny]

Or, how can I just at least make all my columns within one row the same height? so whatever the tallest column is, the other extends to it?

I read it on another thread but cannot locate it now. I think this option could work if I align the columns so at least they stay same height looking neat.

Thanks.

[Rue Nel]

Hello There,

Thanks for writing in! If you want to have a uniform height for your columns, I would recommend that you enable the marginless columns in the row settings. After enabling this settings, there will be margins in your columns, you just have to add a padding around the columns to have some gaps between the column contents.

Another suggestion would be to have a custom inline css in your columns. You need to add an inline style min-height: 400px (400 is just an example) in the column settings. You must make sure that you will insert the minimum height according to the height minimal height when you are browsing in a smaller screens.

Hope this make sense.

[Author]

Posts