that’s caused by an image in the footer:
flameshot_screenshot
In the .et_pb_image_4 CSS class, you have the transform to resize the image. It cause the incorrect size in mobile view. Disable/remove it will solve the issue.
flameshot_screenshot
Thread Starter
giagd
(@giagd)
@lcf
thanks so much.
just to clarify, the issue is because i have transformed that specific image? sorry – i’m still learning!
Hello,
I did some quick review and found the problem is with the Bupa Logo, if you remove that, the black space doesn’t appear, try to resize the Bupa logo and the problem will be resolved.
Hope this helps.
Thanks.
Thread Starter
giagd
(@giagd)
@kartiks16
yes! you are correct, i’ve just removed it and that seemed to fix it.
however, i’m still having the issue where in mobile view the images are still huge in comparison to their formatting on desktop > https://imgur.com/a/JufMNVQ
Yes, that is right.
It is the default nature of the theme you have used, the image width gets changed from Media CSS. For desktop the CSS used is different and for Mobile the CSS used is different.
View post on imgur.com
If you want to have the same size for both mobile and desktop you need to make changes to the CSS file.
Hope this information helps.
Thanks.
Thread Starter
giagd
(@giagd)
@kartiks16
Oh I see. How can I make changes to the CSS file for the whole website? Or do I have to do it individually?
Also, on two of the pages I am still having horizontal scrolling – on specialities and about me. I have updated the logo footer temporarily and replaced on all pages but the issue is still coming up. Thanks so much for your help!
It seems you are using Divi Theme and CSS can either be managed from Admin or from CSS file, but looking at the source it seems there must be a theme CSS setting that you have to look for.
For the About page also there is a problem is with CSS only.
Did you remember playing with CSS? As such a theme comes with proper CSS and structure such an issue hardly occurs so I am a bit amazed.
Thank you.
Thread Starter
giagd
(@giagd)
@kartiks16
I had this in:
h1, h2, h3, h4, h5, h6 {
overflow-wrap: normal;
}
#footer-bottom {
padding: 4px 0!important;
}
to stop the text wrapping on mobile but upon removing it it seems to have stopped the horizontal scroll on one page but not the about page.
