[ZerotoOneParticipant]

hey there,
I’d like to make my columns ‘resonsive’. so the customized columns look good on different screen sizes.
thats how it looks:

on a bigger screen http://prntscr.com/ckmt7p
on a smaller one http://prntscr.com/ckmu66

please help me getting the column in the right shape on the other screen sizes 🙂

[RahulModerator]

Hi There,

From what I understand you want a full width section with four images with no margins. You can try the following in the meantime.

1. In cornerstone, add a section or row. Within the row inspector activate marginless columns.
2. Set that section to use 4 columns.
3. If the row is not going from the left edge to the right edge, you may not be using 100% width in your customizer. You can either change it there and/or add max-width:100%; width:100%; in the “Row” inspector style field.
4. Add an image element to each column, add your images and activate the link toggle to make the image a link. Add your URL and you should be set.

Let us know how that goes. Hope this helps – thanks!

[ZerotoOneParticipant]

thank you for the answer 🙂 let me clarify it a little more…

this is my site: http://www.zerotoone.de, please have a look and try the section of my screenshot in different screen sizes.

now try the similar looking section on this site: http://rnbtheme.com/ it is titled ‘Ronneby major points’

I’d like my columns to behave the same as on the page seen 🙂

[RupokMember]

Hi there,

The columns are already responsive and similar to the example site. If you want to keep the height consistent on all screen size then you need to set min-height to them using media queries for different screen.

Thanks!

[ZerotoOneParticipant]

thank you 🙂 I already use min height, how do I set the media queries? 🙂

[RupokMember]

Hi there,

You can define media query like this :

@media only screen and (min-width: 767px) and (max-width: 979px) {

 //add your CSS here

}

let’s set min-width and max-width to your desired screen range.

Cheers!

[ZerotoOneParticipant]

thank you 🙂 sorry, but I don’t understand what is up with the ‘only screen’ and the additional css. could you please give me a solution I can paste in my custom css? 🙂

thank you so much!

[ChristianModerator]

Please see http://www.w3schools.com/cssref/css3_pr_mediaquery.asp for more details about @media.

Regretfully, giving exact codes would be quite involved so that falls outside the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thank you for understanding.

[Author]

Posts