Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Site responsive layout not showing correctly.

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #193776
    _laurafisher
    Participant

    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.

    #193778
    Paulie_D
    Moderator

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

    Could you be more specific?

    Distorted how?

    #193785
    _laurafisher
    Participant

    Hi Paulie_D

    The text and the images overlap each other.

    #193789
    Paulie_D
    Moderator

    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?

    #193791
    _laurafisher
    Participant

    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.

    #193804
    Paulie_D
    Moderator

    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.

    #193808
    _laurafisher
    Participant

    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! :)

    #193811
    Paulie_D
    Moderator

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.