CODEWITHSUNDEEP
htmlcssflexboxgridfrontend
Jordan Williams
Jordan Williams

Reputation: 191

HTML/CSS Mobile Layout Isn't Responsive

I am working on Frontend Mentor's Single Price Grid component and can’t get my mobile design to be responsive. The top of it goes off the top of the page when I make my browser smaller.

Here’s a link: https://single-price-grid-component.jordanchude.now.sh/

Here’s my repository: https://github.com/jordanchude/single-price-grid-component/blob/master/index-style.css

Here's a snippet of code from my media query.

@media (max-width: 1000px) {
.container {
    display: flex;
    flex-direction: column;
}
#bottom-row {
    flex-direction: column;
    box-sizing: content-box;
    width: 200%;
}
#top-box {
    display: flex;
    flex-direction: column;
}

#bottom-right-box {
    border-radius: 0px 0px 15px 15px;
}

#bottom-left-box {
    border-radius: 0px;
}

#top-box, #bottom-right-box, #bottom-left-box {
    box-sizing: border-box;
    padding: 20px;
}

Here’s a photo of what I am talking about as well. I can scroll down but not up.

error

Upvotes: 0

Views: 57

Answers (1)

Felipe Souza
Felipe Souza

Reputation: 192

The problem is in your translate that is moving your elements up regardless of the page limits.

transform: translate(-50%, -50%);

You can adjust the transform to none on your media query for small resolution or find another way to center your div when using a desktop size.

Try this

@media (max-width: 1000px) {
.container {
    display: flex;
    flex-direction: column;
    transform: translate(50%, 0%);  
    top: 0;  
    left: 0; 
}

Upvotes: 1

Related Questions