Tablet View

Hi Harry

Thanks for reaching out.

All www.remarpro.com themes completely overwrite their own folder when a theme update is run. Unfortunately, the changes that you’ve made to style.css in the parent theme wouldn’t survive an update. I recommend SiteOrigin Custom CSS but it looks like you have a Custom CSS plugin installed already, totally cool to use that. One of the changes made to style.css is causing the problem. Let’s start with a recovery from the edits made. The following needs to be stored in your Custom CSS plugin:

https://pastebin.com/8Ljmh9VL

Now onto the problem. You’ve given h1 and h2 a line of 0, that’s causing the responsive problem. When the headings need to drop onto a second line they land up on the same line because line height is zero. At the top of your Custom CSS find this:

h1 {
  line-height: 0em;
}

h2 {
  line-height: 0em;
}

And replace it with something like this:

h1 {
  line-height: 0em;
}

h2 {
  line-height: 0em;
}

@media (max-width: 1024px) {
	h1,
 	h2 {
		line-height: normal;
	}
}

Hi Mispoln,

Thanks for replying so quickly, sorry I am very new to WordPress and still not great with CSS.

I was able to fix the responsiveness by simple going in to the style.css and changing the value of H1 from 0em to 1em, the only problem is that now in the headings for the pages (not for that tagline) it leaves a large gap below.

I know this sounds confusing :/ but if you look on the home page https://721.cbd.myftpupload.com/ take a look where it says ‘Welcome to West Midlands Home Maintenance’ to where it says “Specialists in Repairs for Landlords and Letting Agents throughout West Midlands” There is a bit of a large gap, what would be the best way to reduce this.

Again thanks for your quick response and help, the theme has been by far the easiest to use.

Regards,

Harry

No problem.

Glad to hear you made some progress.

If you have any questions regarding my explanation of why it’s not ideal to edit style.css or any file via Appearance > Editor, please, let me know. It’s an important point.

Assuming that you’ve now installed a Custom CSS plugin, go to Appearance > Custom CSS and insert:

/* Headings */

h1, h2, h3, h4, h5, h6 {
    margin: 0.89286em 0;
}

The space you’re looking at comes from this rule. Try adjusting it as required.

We can also make the change specific to just those two heading tags. Let me know if you want some help doing that.

I have just installed the SiteOrigin CSS Editor you suggested, and edited the value and has worked perfectly! Thanks for your help!

Can you explain to me why you shouldn’t edit style.css, sorry for being a bit of pain but would like to know for future reference!

Thanks again for all your help.

Glad to hear you’re up and running with SiteOrigin CSS and have inserted your own custom custom styles.

Sure; style.css is stored in the theme’s folder which is located at /wp-content/themes/. When we create an update for Ultra and release it you’ll then have the option to install the update. During the update process the entire theme folder gets overwritten, including style.css. This is why you can’t safely edit style.css within the parent theme folder. Let me know if you have any further questions. Happy to help ??

Okay, that’s understandable, will just use the Custom CSS in the future.

Thanks for your help, if I have any other questions I will post here again!

Many Thanks,

Harry

For sure ??

All the best with your site.

Cheers for now.