Responsive Text - overlapping

[Deesign]

Hi Team,

Requesting some assistance for the correct fix for the below situation that presents as a content area that has text displaying overlapped and on some iphones but not in the 480px and smaller simulator.

Some examples are below. I’m not sure if it’s best to duplicate the whole Row and reset the overlapping text with line breaks in the html and then hide/show for screensize or if there is a more correct way to adjust to have the restaurant menu items and prices display with no overlap as seen in the screenshot below.

Would appreciate if you could review and advise on the more professional correction method.

Thank you!

[ruenel]

Hello @DeeDesign,

Thanks for writing in!

The menu entries no longer have enough space to display prices. To get this resolve, you will need to move the text to the left and right. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 480px){
    .menu strong {
        left: -2em;
    }

    .menu em {
        right: -2em;
    }
}

We would love to know if this has worked for you. Thank you.

[Deesign]

Perfect! A perfect solution - thank you for the guidance.

Now that the prices are aligned left and right the spacing between single and double (because of the width of the screen) lines of menu text are spaced differently. I did attempt to change the line height and to adjust the bottom style for the smaller screen but nothing I have in my current tool belt seemed to be able to get the line spacing to streamline. A little more help please

[lely]

Hi @DeeDesign,

It is a side effect of the bottom: -0.3em; that you have added for the menu.
Please update this:

.menu li {
    clear: both;
    margin: 0;
    padding: 0 0 1.8em 0;
    position: relative;
    border-bottom: dotted 2px #999;
}

To this:

.menu li {
    clear: both;
    margin: 0;
    padding: 0 0 1.8em 0;
    position: relative;
    border-bottom: dotted 2px #999;
    min-height: 3em; /*This will create proper spacing between menus*/
}

Please note that further side effect of a customization is outside the scope of our support. Thank you for understanding.

[Deesign]

@lely

min-height: 3em; /This will create proper spacing between menus/

Brilliant! Thank you for sharing and for your patience… worked like a charm!

[friech]

You’re most welcome,

Cheers!