[Resolved] mobile formatting

[gedosan]

Hi guys

Just a quick one if I may.

Scroll down the page till you get to the ‘Pro Tip’ callout. How do I get this so it fits in the viewport on mobile, please? I’ve tried putting @media (max-width:768px) before it but doesn’t appear to work.

Thanks!

[David]

Hi there,

can you disable the cache plugin so we can take a closer look?

[gedosan]

Sorry yes of course. Done!

[David]

Try this instead:

.mini_callout {
    position: relative;
    padding: 20px 20px;
    background: #eeeeee;
    margin-bottom: 24px;
    margin-left: -20px;
    box-sizing: border-box;
    width: calc(100% + 30px);
}
@media (min-width: 769px) {
    .mini_callout {
        width: calc(100% + 40px);
    }
}

@media (min-width: 1024px) {
    .mini_callout {
        padding: 20px 35px;
        width: calc(100% + 71px);
        margin: 40px 0 24px -35px;
    }
}

[gedosan]

Top man, thanks mate.

[David]

You’re welcome

[Author]

Posts