Editing with conerstone, Mobile responsive and Overlap issue

[gloryhound78]

I am having 3 issue with using Xtheme. The first problem I am having is with creating the main page for my blog. I am editing with cornerstone, and it’s telling me that “the preview Html did not include a closing ; tag. It may fail to load or work properly”. So I don’t know where I have to go to fix the tag. I also am not very good at coding. I purchase the xtheme because I read on the site that I do not need to know coding to use the xtheme software; which I am now seeing that may not be the case.

The second problem I am having is connected to the third issue. I create an overlap on an image, and the text I created is touching the broader, and when I resize the site to mobile, the text looks very difficult to read. I would like to try and correct these issue.

[ruenel]

Hello There,

Thanks for posting in!

1.) Regretfully we cannot check your site since it is under construction mode. If you can give us access to be able to see the homepage, that would really help. Meanwhile, I see that you are using a caching plugin. Please clear your plugin cache maybe this is just a caching issue.

2.) When you say overlap, did you added a negative margin to one of the elements? Please keep in mind that this negative margin will be applied in all screen sizes. If you want it to overlap in desktop and display as normal in smaller screens, you can do this in two different method:
a.) You can utilize the image element ID and use it along with css. In your image settings, click on the “Customize” and insert your ID my-image

and use this following custom css in the settings tab, Settings > Custom CSS

@media(min-width: 980px){
  #my-image {
     margin-top: -40px;
   }
}

This code serves as an example. You will need to change it if needed.

[gloryhound78]

@RueNel

under construction mode

I have taken the under construction mode off. I don’t have an issue with the image. I have text and a call to action that I have overlap over the image.

[friech]

Hi There,

With regards to the text and call to action issue, Ruenel is right. It was the margin that is causing the issue. We can use the same method mentioned above, but this time we are going to reset the margin on mobile so the text won’t look squeeze. To do this, in your second section (where the text and email form is place) add a CLASS reset-margin

And then add this to Theme Options > CSS

@media (max-width: 767px) {
	.reset-margin {
		margin: -8em 0 0 !important;
	}
}

That -8em value which is the top margin, is the one that makes the section overlap, right? You can set that to 0 if you don’t want the overlapping to happen on mobile.

Clear your caching plugin and browser’s cache to see this changes immediately.

Regarding with the error that you’re seeing on the Content Builder/Cornerstone; please navigate to this page, find your error and do the respective solution provided.

Hope it helps,
Cheers!

[gloryhound78]

Hey,

That did the trick, my text on the mobile is perfect.

Thanks so much for your help.

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.