Text going off screen on mobile

Support
#1

Hello,

My text is not optimizing for mobile on some of my pages. It is running off the screen instead of wrapping to the next line. The border around it seems to be doing the same.

#2

Also, it seems fine in mobile preview but when viewing on an actual phone the text does not fit.

#3

Hello Kacie,

That is because of the negative margins that you set to the Text element.

Try adding this to the Element CSS of the text element:


@media (max-width: 480px) {
    $el {
        margin: 0 !important;
    }
}

Hope this helps.

#4

Awesome, and how do I fix the border going off screen such as on this page (see secure note)

#5

Hello Kacie,

Thanks for asking. :slight_smile:

Please inspect the section and under Customize > Setup > Class add a class name. After that add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .add-class-name {
   margin: -1.45em -1.5em -1.04em -1.04em;
  }
}

Please change add-class-name with your class name.

Thanks.

#6

Hello! It doesn’t seem to be working, sorry.

#7

Played around with the margin of the section and I think I fixed it! Can you double check for me when you see this?

#8

Also another question,

on mobile for my home page, how can I center the arrow underneath the hours of operation text?

#9

Hello Kacie,

You added a 36 pixel padding to the right of the section. And this padding has affected the positions of the row container and columns. You added a negative margins which add complication to the position of the text. Negative margins were the reason why the text did not wrap to the next line. You will have issue with negative margins. If you need to position the text, remove the 36 pixel padding and the negative margins first. And then, you can set a maximum width of the column by adding an inline css max-width: 95%; if you think the column is too wide. Once the column is centered in the section, all the element will be at the center of the section.

This should how it looks like when there is no negative margins in your element:

Hope this helps.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.