Archived topic

Breaking Mobile Responsive Breakpoints

7 replies · Started by Andre on February 13, 2020

Viewing posts 1–8 of 8

February 13, 2020 at 5:07 am #1163959

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?

February 13, 2020 at 8:26 am #1164284

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.

February 13, 2020 at 8:50 am #1164337

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

February 13, 2020 at 9:26 am #1164384

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,

February 13, 2020 at 9:38 am #1164400

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.

February 13, 2020 at 7:58 pm #1164779

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

February 17, 2020 at 2:39 pm #1168546

Thank you very much Tom, got it fixed!

February 17, 2020 at 7:45 pm #1168684

No problem! :)

This archived topic is closed to new replies.

Start building better websites today.