Docs

[adagency2013]

I am trying to create different setting for my site in different devices.
here I have a code for my header’s logo, but it does not quite work.
It works for 1100px and up.
But does not work for Mobile phone 360px till 680px
neither works tablet 760 to 1099.
Can you suggest a solution.
Basically I want the logo image to adjust to the screen size in different devices.
Thanks

http://e64.39f.myftpupload.com/

@media only screen and (min-width: 1100px) {
  .logo-image{
margin-left:100px;width:85px;display:inline;
  }
}
@media 
  (min-device-width: 360px) 
  and (max-device-width: 680px) {
   { 
    .logo-image{
margin-left:0px;width:50% ;display:inline;
  }
   } 

@media 
  (min-device-width: 760px) 
  and (max-device-width: 1099px) {
     .logo-image{
margin-left:0px;width:60% ;display:inline;
  }
   } 

[adagency2013]

Also, I added this into customizer custom css.
However it’s been a while I no code will work in my child theme css.
I’ll enter the login beelow so can you look at it and find out why. The other child theme files work fine.
Thanks

[adagency2013]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thank you for writing in! Please replace your code with this one:

@media screen and (min-width: 1100px) {
  .logo-image{
     margin-left:100px;width:85px;display:inline;
  }
}
@media screen and (min-width: 360px) and (max-width: 680px) {
    .logo-image{
      margin-left:0px;width:50% ;display:inline;
  }
} 

@media screen and (min-width: 760px) and (max-device-width: 1099px) {
  .logo-image{
     margin-left:0px;
     width:60% ;
     display:inline;
  }
} 

Let us know how this goes!

[adagency2013]

I tested it and below is how my code looks like for testing it. The first three work, but not the last one which does not work for tablets in portrait mode, with or without an orientation clause.(I also added a border color to recognize between them here http://quirktools.com/screenfly/#u=http%3A//e64.39f.myftpupload.com/psoriasis-treatment/&w=533&h=320&a=34&s=1

@media screen and (min-width: 1100px) {
  .logo-image{
     margin-left:100px;width:85px;display:inline;
  }
}
@media screen and (min-width: 300px) and (max-width: 480px) {
    .logo-image{
      margin-left:0px;width:50% ;  border:green 1px solid;
  }
} 

@media screen and (min-width: 480px) and (max-width: 680px) {
    .logo-image{
      margin-left:0px;width:100% ;  border:black 1px solid;
  }
} 

@media screen and (min-width: 760px) and (max-device-width: 1099px) and (orientation: landscape) { ... } {
  .logo-image{
     margin-left:0px;
     width:50%;
   border:red 1px solid;
  
  }
} 

[Rad]

Hi there,

The last one should be like this,

@media screen and (min-width: 760px) and (max-device-width: 1099px) {
  .logo-image{
     margin-left:0px;
     width:50%;
   border:red 1px solid;
  
  }
} 

This one { ... } also breaks it. Cheers!

[adagency2013]

It does not work with or without.
Please see here http://quirktools.com/screenfly/#u=http%3A//e64.39f.myftpupload.com/psoriasis-treatment/&w=533&h=320&a=34&s=1

Also see attached screenshot of the tablet view in landscape.
Please observe that the test border style does not show at all, so no style is taking effect.

[Christopher]

Hi there,

Upon checking your site, CSS code was applying fine, see the attachment.

Please clear cache and test again.

Thanks.

[adagency2013]

Yes in the “portrait” orientation is working fine.
As I mentioned and showed in the attachement in my last reply, the issue is in the “landscape mode”
Here is the attachment again.

[Rad]

Hi there,

The problem with device simulation is it’s not actually simulating the orientation the same as on a real device. It only changes the dimension to make it looks like on landscape or portrait.

Accordion to your screenshot that it should be smaller right? But it’s already small on my end. Should it be bigger?

Thanks!

[adagency2013]

What software are you using to simulate it?

[Rue Nel]

Hello There,

We are just using Chrome Dev Tools. To know more how you can disable or enable this feature in Chrome, please check the documentation here: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en

Hope this helps.

[adagency2013]

Thanks. So you are saying Chrome software simulates more truly than quirk tools?

[Rupok]

Hi there,

Thanks for updating. Chrome DevTools is the best developers tools out there and have most accuracy.

Cheers!

[Author]

Posts