Pages look different on my mobile

Hi,

In those two pages i assume you mainly mean by the spacing bellow the image in mobile view is your concern?

Those spaces are empty line breaks you have in your content bellow that top image which i can see in code. You need to edit those pages and remove extra empty lines simply.

Please try and update if that fixes your issues.

Thanks,
Munir

The problem is that you have empty paragraphs under the image, see the picture: https://d.pr/i/1gMc0

Hi. Thanks, it now looks a lot better ??

When I took away this empty paragraph it then combined my picture and text at the same level ?? but when I adjusted the size of the picture, the text shifted back down ??

There is one thing I couldn’t figure out though – the space between my heading and bullet points is too big on my PC and mobile (landscape view)… FYI. It’s ok on my mobile in portrait mode.

Here’s the code:

<span style=”text-decoration: underline;”>We have years of business experience in the UK to draw from, including:</span>
?

meetings and conferences
Any ides?

Oops, the code didn’t show properly, I’ll try again:

<span style="text-decoration: underline;">We have years of business experience in the UK to draw from, including:</span>
&nbsp;
	<li>meetings and conferences</li>

Hi,

I am glad to help you out ??

For fixing the spacing issue basically in your CSS i can see there is a margin bottom of 24px for all ‘p’ elements, which is disabled in mobile portrait view.

I suggest you add following little css code in your child theme’s CSS or use custom CSS section or plugin please.

.site-main p {
    margin: 0 0 10px !important;
}

It will reduce the spacing and will look good hopefully. In case you need more or less spacing just edit the code in place of ’10’ you mad increase it or decrease it simply.

Let me know if this helps you ??

Thanks

Excellent, that worked perfectly, thank you !! ??

Do you know anything about pictures? All of them are fine except the ones in my prices section. They are clear on the mobile, but sometimes they are blurry on the PC. Usually, the first time a picture has to load, it’s blurry – but the second time it’s clear.

Any ideas?

HI,

Sorry for late. I do not understand your last comment. Exactly which images are you talking about? May you take the screenshot please?

Thanks

Hello again, thanks for your reply ??

All my images seem to load ok, except for the ones associated with my “prices”.

Basically, when you click on any of the 6 links in my ‘prices’ section (https://www.learnandspeakenglish.co.uk/#focus), it brings up a page showing 3 images, and they’re ALWAYS BLURRY. If you click on one of them, it brings up a page with the same image, which ISN’T BLURRY. And if you navigate back to the original picture, it’s NO LONGER BLURRY. Basically, it’s the initial picture that’s always blurry.

I would send you a screenshot – but i don’t know how… ??

Thanks

I see.

Unfortunately i would not be able to guide you on how it could be fixed as that would need some technical skills.

However i can tell you that Jetpack plugin is causing it. You must be using it’s module called “Photon” which serves images from a CDN and service different sized images based on resolution, etc to speed up the website’s performance.

You may contact at there support to see if someone can help you fix this issue.

Regards,
Munir

Cheers Munir ??

I have contacted Jetpack, hopefully they’ll be able to fix it..

Thanks again.

Cheer ??

I would request you to mark this ticket resolved as you need to open a new ticket with them.

Thanks,
Munir

Will do Munir, Thanks again.

If you’d like to practice your English (for free) with me via Skype just send me a message using the contact form on my site: https://www.learnandspeakenglish.co.uk/#contact ??

Have a great day ??

My issue is that when viewing inner pages of my site, on mobile in portrait view, there are NO spaces between ANY of the paragraphs, which causes walls of text. Meanwhile on desktop and in mobile landscape view, everything looks normal.

I already tried this CSS:

@media (max-width: 480px){
.entry-content p {
margin: 0 0 24px;
}
}

It doesn′t work,

and I′ve tried another one:

.site-main p {
margin: 0 0 10px !important;
}

It doesn′t work again,

In landcaspe everthing ok. The issue is in Portait.

Thanks in advance:)

??