🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Breaking Mobile Responsive Breakpoints

Home Forums Support Breaking Mobile Responsive Breakpoints

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1163959
    Andre

    Hi! I’m having some issues with my responsive breakpoints. I’m working on Chrome browser and setting my mobile breakpoints to the set breakpoints on the element inspector (320, 375, 425 etc). I have a group block (thirdblock) with a background image. When ever I set the margin height of the image (very light blue color with cogs in the background) to sit under a text block with the inspector, update it and refresh the page, the margin height moves. Also If I set a number of breakpoints (copy paste the same code with the adjusted pixel measurements), the first media query would remain unbroken, but the rest would be crossed out and break.
    Can someone help with this please?

    #1164284
    David
    Staff
    Customer Support

    Hi there,

    Sorry but i don’t understand what your doing or what the issue is. Could you explain what you’re trying to achieve and maybe we can help with that.

    #1164337
    Andre

    I’m sorry for the confusion. I’m trying to make this image sit under the “Create A Website About Something You Enjoy” block text at the bottom of my website for various mobile media sizes (breakpoints) and it doesn’t seem to be working out for me.

    Here is the code I have in my editor;

    @media (max-width: 320px) {.thirdblock
    {background-image: url('https://howtomakemoneywithawebsite.org/wp-content/uploads/2020/02/frontimage.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    margin-top: 564px;}
    }
    
    @media (max-width: 375px) {.thirdblock
    {background-image: url('https://howtomakemoneywithawebsite.org/wp-content/uploads/2020/02/frontimage.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    margin-top: 448px;}
    }
    
    @media (max-width: 425px) {.thirdblock
    {background-image: url('https://howtomakemoneywithawebsite.org/wp-content/uploads/2020/02/frontimage.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    margin-top: 390px;}
    }
    
    
    #1164384
    David
    Staff
    Customer Support

    No problems 🙂

    I think this is the issue:

    .Blueprint {
        position: absolute;
        background-image: url('https://howtomakemoneywithawebsite.org/wp-content/uploads/2020/01/createpic.png');
        font-family: 'Montserrat', sans-serif;
        width: 100%;
        padding-top: 37px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        height: 415px;
    }

    When an element has position: absolute; it takes out of the document flow, so the .thirdblock element now slips behind it. Try removing position: absolute; and let me know,

    #1164400
    Andre

    Somewhat David, I have removed the position: absolute and it seems to have fixed the image hiding issue, but see here the rest of the breakpoints are strikedthrough and not working.

    #1164779
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What’s overwriting those values? If they’re crossed out, it means something else is bein applied. If you scroll up to the top of the CSS in that screenshot, what’s on top?

    Also, you might be able to do this:

    @media (max-width: 425px) {
        .thirdblock {
            background-image: url('https://howtomakemoneywithawebsite.org/wp-content/uploads/2020/02/frontimage.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            margin-top: 390px;
        }
    }
    
    @media (max-width: 375px) {
        .thirdblock {
            margin-top: 448px;
        }
    }
    
    @media (max-width: 320px) {
        .thirdblock {
            margin-top: 564px;
        }
    }
    #1168546
    Andre

    Thank you very much Tom, got it fixed!

    #1168684
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.