Content is spaced weird on ipad/mobile

[Kacefont]

Hello, some of my sections on my homepage that have two columns (an image and text) space weird when viewed on ipad (md) and mobile phones (sm/xs).

The two main issues are:

1.On Ipad screens (md) the photos become too small next to the column of text and don’t line up. If I hide the image element on md screens, the text formats weird by itself (off-centered, very narrow margins which breaks up th list). Is there a way to have that section of text center itself when the image element next to it is hidden for medium screens? Or do you have another suggestion on how to make these two sections look okay on md screens and keep formatting the same for large?

2. On phone screens (sm/xs),there is some weird extra white spacing in some of the sections that I would like to remove without affecting the padding implemented for computer screens.

Will post URL and password underneath.Thanks!

[ruenel]

Hello Kacie,

Thanks for writing in!

To resolve your issue, please remove the 4em left margin you have added in the text element. If you really need to move the text to the right, please use custom inline css which you can add it in the “Customize” tab of the text element and then insert this custom css:

@media(min-width: 980px){
  $el{
    margin-left: 4em;
  }
}

And then lastly, please remove the <h2> tag in your headline element.

<h2 style="text-align: left;"><span style="color: #000080;">Permitted Materials</span></h2>

You need to insert only this:

Permitted Materials

because the headline element is already wrap with an H1 heading. You can actually make it h2.

And then find the Text Format option to choose the color and tweak other font styling too.

If you don't see those options, you need to turn on the **Advanced Mode** by going to the **Settings > Preferences > Advanced Mode**

Hope this helps.