Site responsive layout not showing correctly.

[_laurafisher]

Hi,

The mobile version of the following site isn’t displaying correctly. The layout only seems to be distorted on mobiles and not tablets.

Could someone please help me on why this is.

URL: http://www.psi9.com/arcsnsparks/

Thanks.

[Paulie_D]

The layout only seems to be distorted on mobiles and not tablets.

Could you be more specific?

Distorted how?

[_laurafisher]

Hi Paulie_D

The text and the images overlap each other.

[Paulie_D]

There is a shipload of inline styling going on in there.

Is this built on iframes or using javascript?

What media queries are you using…if any?

[_laurafisher]

It’s built using the Avada theme and doesn’t use iframes.

The media queries in there are what came built in with the Avada theme.

The only query I can see which may be useful is:

@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait) {
.header-social, #header, #footer, .footer-area { padding-left: 20px !important; padding-right: 20px !important; }
#main { padding-left: 20px !important; padding-right: 20px !important; }
.width-100 .fullwidth-box, .width-100 .fusion-section-separator {
padding-left: 20px !important;
padding-right: 20px !important;
}
.width-100 .fullwidth-box, .width-100 .fusion-section-separator {
margin-left: -20px !important;
margin-right: -20px !important;
}
}

I’m new to media queries so I Hope this helps.

[Paulie_D]

You shouldn’t need to use !important at all except as a last resort…certainly not on every property like that.

Your media queru has a min-width of 768px so it won’t affect phones at all as far as I can tell.

But this sort of thing

<div class="fusion-fullwidth fullwidth-box" style="background-attachment:scroll;background-color:#ffde16;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;border-color:#eae9e9;border-bottom-width: 0px;border-top-width: 0px;border-bottom-style: solid;border-top-style: solid;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;" id="hpsection2"><div class="avada-row">
<h2 style="text-align: center; line-height: 33px;"><strong>OUR TEAM IS ALWAYS ON HAND TO DISCUSS YOUR NEEDS</strong><br>
PROVIDE YOU WITH THE BEST QUOTATION</h2>
<h3 style="text-align: center; margin-top: -15px;">TO MEET YOUR BUDGET</h3>
</div></div>

worries me..all that CSS should be in the stylesheet.

[_laurafisher]

Not sure why they are on every property but I will get those looked at as well as putting the styling into the stylesheet.

Do you have any ideas with why the mobile version displays everything ontop of one another?

When I use inspect element using chrome and Remove the image of the man with his hand in his pocket and I change the font size it helps to make it look more alike the desktop version. How would I add a media query to an Image?

Thank you so much for your replies. I appreciate your time! :)

[Paulie_D]

Until such time as all that code has been extracted and placed in the stylesheet it’s going to be hard but as I said, the media query shown only affects devices over 768px…which won’t be most phones.

[Author]

Posts