Responsive columns on page

Hi Sarah,

Your have two paragraphs that use fixed width (300px), so it can’t adjust automatically for smaller screens. I understand that you want to have your text the same width than your pictures, but as a first step, you may remove width: 300px; in your paragraph style. That will solve your overlapping issue.

This will break your intended layout, so you’ll have to work this another way.

Let me know if you need further help to achieve what you want.

Hi Sarah,

You need to work on your DIV element. Instead of having :

<div style="width: 50%; padding: 0 10pt 0 0; float: left;">

Try :

<div style="width:46%; padding:0 2%; float:left; align:center;">

Use this for both DIV. (You don’t need to put float:right;on the second one). When you want to achieve a responsive layout, use percentages instead of fixed width.

You may consider remove the text-align:justified on your paragraph as it does not give a nice result with narrower columns.

If you can add some custom CSS to your theme you may want to use a media query to add some specific rules for smaller devices. Let me know if it’s something you can do.

I hope this will help you!

Hi there ??

Thanks so much for your assistance on this -your explanation of using percentages instead of fixed width makes perfect sense. Unfortunately, this has caused the two sections to stack on top of each other. I also changed the paragraph to 46% but now the text block is too wide – it should be the same width as the photo, if possible.

I am able to add custom CSS on this theme, as well.

S