@media problems

  • Resolved David_G

    (@questas_admin)


    9 years, 9 months ago

    I have added a widget with phone & email, works perfectly on laptop, but having issues with android. When I setup 480px I finally got everything centered, then I setup 767 it messes up my 480 style.
    SITE LINK

    .span6 ul.header-cta-buttons {
  border: 1px solid #000000;
  border-radius: 5px;
  left: 50%;
  max-height: 10px;
  max-width: 500px;
  padding-bottom: 10px;
  position: relative;
  text-align: center;
  top: -40px;
}
@media (max-width: 480px){
.span6 ul.header-cta-buttons {
left: -5%;
top: 5px;
max-height: 30px;
max-width: 320px;
border: none;
}}
@media (max-width: 767px){
.span6 ul.header-cta-buttons {
left: 10%;
top: 5px;
max-height: 10px;
border: none;
}}
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter David_G

    (@questas_admin)

    I think I have it, added a @media 360px line, seems to work, still don’t have it perfectly centered.

    Not sure if this will help, but you should organise your @media in the order high-low as CSS executes code serially so the last code it reads will be the operable code. So code you set in max-width: 767 will still work in max-width: 480 then 360 unless you change it.

    Hope that makes sense!

    Thread Starter David_G

    (@questas_admin)

    WOW, it helped a lot, and explains why I was FIGHTING the css and losing the battle.
    Much thanks. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘@media problems’ is closed to new replies.