Hi, my website looks fine on common screen sizes such as 13-17inch, however on my computer which is a 22inch monitor, the entire theme is out of place. This happens in Chrome browser and only on the home page. My headers and content are everywhere. Can you please help me correct this?
My site is stephaniebeauverd.com
Thank you in advance.
Hi Eliaseconomou,
I don’t seem to see any major issues outside of the massive smart slider at higher resolutions. You should be able to correct that by adding the following CSS to WP AdminAppearanceCustom CSS:
@media (min-width: 1500px){ #pgc-8-0-0 { max-height: 120vh; }}You might also need to install the SiteOrigin CSS Editor.
Outside of that I don’t see any major issues. Could you maybe screenshot what you’re seeing that doesn’t look right, or maybe what you expect to see vs what you are seeing.
Hi Alex, thanks for reply.
Everything is done using Siteorigin Page builder.
I have attached some photos of what it is supposed to look like so you can compare the difference to what comes up in the distorted photos.
I have also provided some photos of the back-end of that page so you can see the elements used.
BACKEND
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-20-at-8.35.18-AM.png
[http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-20-at-8.35.18-AM.png]
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-20-at-8.35.25-AM.png
NORMAL SITE LOOK (on smaller screen sizes)
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-20-at-12.52.13-PM.png
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-20-at-12.52.17-PM.png
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-20-at-12.52.20-PM.png
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-20-at-12.52.23-PM.png
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-20-at-12.52.25-PM.png
DISTORTED LOOK
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/IMG_9005.jpg
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/IMG_9008.jpg
http://www.stephaniebeauverd.com/wp-content/uploads/2016/07/IMG_9009.jpg
If you compare with the photos, there is a big difference in the styling and also the header which comes up above the slider I have as the first thing on the page.
if there is anything else I can do please let me know.
Hi Eliaseconomo,
To clarify, in web design screen sizes are irrelevant. Screen resolution is what matters greatly as A 15″ screen will still display the same image, albeit slightly larger, as a 30″ screen if the screens both display at the same resolution. As such, could you clarify the screen resolution of the computers you’re using are?
The only issue in the screenshots I’ve personally been able to replicate is the massive slider. That is however fixed by adding the CSS I provided in my previous reply. Could you please clear each browser cache and if that doesn’t help, could you please try in a “fresh” (as in one recently installed with zero setting changes and no extensions installed) browser?