Adjusting overlapping content on mobile version

[RevealHM]

Hello,
I am not sure which settings (responsive adjustments) to adjust to make this appear correctly on mobile version.

Blog hawaii - Reveal Hair & Makeup

Thank you,

Ashley

[tristup]

Hi Ashley,

Thanks for reaching out.
You need to adjust the Line Height for the Text field as shown in the screenshot, to avoid the overlapping text in the smaller screen.

I have also found that the negative margin is set to the section you marked in the screenshot. I would suggest you remove that from the custom coding to make the section properly aligned.

Hope it helps.
Thanks

[RevealHM]

Thank you. I was able to adjust the line height on mobile so that the words do not overlap.

As far as the negative margin, will removing that code affect the overlap look (text box and image) on the desktop version? If I recall correctly I think I set a negative margin on purpose so I could get the text box to lay over the image.

[ruenel]

Hello Ashley,

You have added this custom element CSS to the Row element so that it overlaps to the image.

$el.x-row{
  margin-left: -70px;
}

This code will be applied to all screen sizes. If you want that this will only be applied on medium and larger screens, you will need to use the CSS @media() function.

• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

For example;

@media(min-width: 980px){
   $el.x-row{
       margin-left: -70px;
   }
}

The example code will only be applied to the screen sizes that is larger than 980 pixels. And in mobile or smaller screens, your row will be displayed like this:

Hope this makes sense.

[RevealHM]

Hi Ruenel. That worked. Thank you very much. Really appreciate the support from your team and clear explanations as I have no coding background and am a team of 1!

[ruenel]

We are glad that we could be of assistance, Ashley.