Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

CSS Scaling for Mobile

Recommended Posts

jmad+    80
jmad

I have the same logo on two pages but positioned differently.  I added the below CSS to handle scaling of the image on mobile.  It works but I thought I should be able to write it in a more condensed fashion but it doesn't work.  Is there a way to condense this or a better way to target the two elements?

 

#mediaboxur1rzx9, #mediaboxuy8x5gs img{
  width: 350px;
  &{@media (max-width: 480px){
      width: 250px;
    }
  }
}
 

 

THIS BELOW IS WHAT  I USED AND IT WORKS

 

/*resize logo on home page*/
#mediaboxur1rzx9 img{
  width: 350px;
  &{@media (max-width: 480px){
      width: 250px;
    }
  }
}
 
 
/*resize logo on about page*/
#mediaboxuy8x5gs img{
  width: 350px;
  &{@media (max-width: 480px){
      width: 250px;
    }
  }
}

Share this post


Link to post
Share on other sites
Simon    247
Simon
#mediaboxur1rzx9 img,
#mediaboxuy8x5gs img{
width: 350px;
&{@media (max-width: 480px){
width: 250px;
}
}
}

you forgot the img

Share this post


Link to post
Share on other sites
jmad+    80
jmad

Thanks.

Share this post


Link to post
Share on other sites

×