CODEWITHSUNDEEP
htmlcss
user3150060
user3150060

Reputation: 1745

CSS resizing DIV on smaller screens

I have a problem with CSS , when I resize my screen , it doesnt collapse , any idea why? this suppose to be at the center of the screen I want it to stay at the center but resize when the screen resolution change

Here is my code :

        <div style="position:relative; width:900px; margin:auto; text-align:center; font-size:25px;">
                <div style="margin-top:70px;"> 
                    <p style="line-height:1">some textttttttttt</p>
                    <p style="line-height:1">Another texthghghghgh </p>
                    <p style="margin-top:30px">different stuff here :</p>
                    <h2 style="color:#EE3969; font-size:45px"> first</h2>
                    <h2 style="color:#DE9540; font-size:45px"> second</h2>
                    <h2 style="color:#00AAC2; font-size:45px"> third</h2>

                </div>

            </div>

Thanks

Upvotes: 2

Views: 6260

Answers (2)

user3553577
user3553577

Reputation: 50

Replace the first line of your code with this 

<div style="position: relative; width: 100%; margin:auto; text-align: center; font-size: 25px;">

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

To change the layout, you can use JavaScript, or if you want a CSS answer, you use CSS3's Media Queries.

Using them you change the element's style properites depending on the Client's machine properties, such as Screen size, etc.

@media only screen and (max-width: 500px) {
  /* properties for a screen with size 500px */
}

This way you can alter the CSS properties of the div, once you resize it.

Please note that you're using hardcoded 900px value. Which would always force the browser to make it 900px, no matter how shorter you set the Screen's size by Resizing the Browser. For that thing, you can use CSS3's Media query. To change the Layout of the Document when Screen size gets shorter.

This way, you can have multiple styles for different screen sizes without having to worry about each of them and creating a single style for them.

Upvotes: 1

Related Questions