CODEWITHSUNDEEP
cssmedia-queries
Alexandra
Alexandra

Reputation: 3

The divs dont shift their positions with decreasing screen size

I need to position footer1 and footer2 with abolute position with 20px from left side using media query.But no matter what I do the 2 divs dont move at all.Please help

  @media only screen and (max-width:1232px) {

    .footer1{

    left:20px;

    }

    .footer2{

    left:20px;

    }

}

  <div class="color2">
    <div class="footer1" style="color:white;position:absolute ;top:0px;             left:20px ;font-family: 'Abel',sans-serif;">
    <ul style="list-style:none; "><li style="font-size:20px; font-  weight:bold">Contact Us</li>
            <li style="font-size:15px"> </li>
            <li style="font-size:15px">No. 461, </li>
            <li style="font-size:15px">Rose Road</li>
            <li style="font-size:15px">Bk Avenue</li>
            <li style="font-size:15px">Sri- Lanka</li>
            <li style="font-size:15px">07786755422</li></ul>

     </div>


     <div class="i_info" style="font-size:30px ; position:absolute ; top : 310px">
       <a href="https://www.facebook.com/" target="_blank">  <i class="fab fa-facebook-square icon-7x" STYLE="color:white ; position:absolute ;left:1000px"></i></a>
       <a href="https://twitter.com/login" target="_blank">  <i class="fab fa-twitter-square" STYLE="color:white ; position:absolute ; left:1080px"></i></a>
       <a href="https://www.linkedin.com/uas/login" target="_blank">   <i class="fab fa-linkedin" STYLE="color:white ; position:absolute ;left:1160px"></i></a>

       </div>


       <div class = "footer2" style="width:600px;height:20px;font-size:16px ;color:white ; position:absolute;top:360px ;left:978px ;font-family: 'Abel',sans-serif;" >
        <i class="far fa-copyright"></i>
        BT Solutions

       </div>

Upvotes: 0

Views: 44

Answers (2)

Kamil Naja
Kamil Naja

Reputation: 6692

I suggest remove all inline styles and put them to separet file.

<div class="footer2">

css file

.footer2 {
  width:600px; // for me is terrible to use magic numbers to width and height of element.
  height:20px;
  font-size:16px;
  color:white;
  position:absolute; // is really needed to change position?
  top:360px; // very bad practice
  left:978px; // very, very bad way to set left space, maybe you can center this 
  font-family: 'Abel',sans-serif; 
}

@media only screen and (max-width:1232px) { // why this value in breakpoint?

  .footer2 {
    left:20px;
  }
}

and this should work.

I added some comments, because you want achieve your goal in bad way.

Upvotes: 0

Entalpia
Entalpia

Reputation: 787

The inline styles will always take priority over the ones declared in your CSS file (unless you force them with !important, but that's a completely different story). As long as you use the left:978px on your second div, it won't move even if you try to use media queries.

In general, the priority would be:

  1. styles declared with !important,
  2. inline-styles declared on the element
  3. styles for a combined selector
  4. styles for a generic selector

Also, I really recommend you don't use inline css, but put it all in the file instead - it is very rare you need to use the inline styles anyways and that way you're not able to share the properties between elements with the same class.

You should just use 

.footer1 {
    color:white;
    position:absolute;
    top:0;
    left:20px;
    font-family: 'Abel',sans-serif;
}

.footer1 ul {
    list-style:none;
}

...

etc. and then use your max-width media queries in the bottom (also in the right order, so first the highest max-width, followed by queries addressing lower width).

Upvotes: 1

Related Questions