[Resolved] Breaking Mobile Responsive Breakpoints

[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?

[David]

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.

[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;}
}

[David]

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,

[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.

[Tom]

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;
    }
}

[Andre]

Thank you very much Tom, got it fixed!

[Tom]

No problem! 🙂

[Author]

Posts