CODEWITHSUNDEEP
htmlcss
Aditya
Aditya

Reputation: 986

How do I constrain texts and elements inside a div

I am creating a webpage using only CSS & HTML

This is what the homepage looks like

Everything looks fine until I zoom in. Once I zoom in the letters start to flow out of the div.

enter image description here

How do I fix this ?

Upvotes: 0

Views: 551

Answers (1)

gwesseling
gwesseling

Reputation: 483

Your problem has to do with responsive webdesign. By default people create there website for there own screens. But not everyone has the same screen resolution or viewport etc as you have.

The solution:

Media queries:

With media queries you can alter you css code when the user has a different resolution/viewport or is resizing there screen.

@media (max-width: 979px) {
    .h2 {
        font-size: 10px;
    }
}

This will change the font of a the h2 tag to 10px when the screen width of the user is smaller then 979px. I will provide you with a link to a w3Schools page so you can see what kind of attributes the @media rule has.

Media queries w3cschools

tip: You can see your resolution by opening the chrome developer tools and resizing your browser.(left top corner)

If you have any future questions please let me know I will explain some more about media queries.

Upvotes: 3

Related Questions