Jump to content


Photo
- - - - -

CSS Scaling for Mobile


Best Answer Simon_P , 14 July 2014 - 06:33 PM

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

you forgot the img Go to the full post


  • Please log in to reply
2 replies to this topic

#1 jmad

jmad

    Advocate

  • Members

  • 842 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 July 2014 - 06:29 PM

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;
    }
  }
}


#2 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 14 July 2014 - 06:33 PM   Best Answer

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

you forgot the img

#3 jmad

jmad

    Advocate

  • Members

  • 842 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 July 2014 - 09:46 PM

Thanks.