Regarding Mobile size media query

[Jinka Varalakshmi]

Hello, My blog is whatvwant.com. I am using po.st plugin to display social sharing buttons. I wanted to disable this plugin in mobile. I have asked plugin developer for help. His answer is,

If you are using media queries then you simply need to add this style on your mobile size media query:

If you are using vertical:
.pw-float-left { display: none; }

If you are using horizontal:
.pw-layout-horizontal { display: none; }

I using metro pro child theme. Where should I add this code?

---

My hobby is to learn about new technologies and writing technical tips in my blog whatvwant.com
Google+ | Facebook | Twitter

http://www.whatvwant.com

[Erik D. Slater]

Based on how your site currently stands ...

If mobile includes tablets then you will want to place those two lines of CSS code inside the @media only screen and (max-width: 767px) section. Otherwise, slip them into the @media only screen and (max-width: 480px) section.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Jinka Varalakshmi]

I have placed like this. It is not working. Let me know is it wrong?

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

.content .entry-meta .entry-comments-link {
display: block;
float: none;
margin: 10px 0;

}
.pw-layout-horizontal { display: none; }
}

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

.header-image .site-title a {
background-size: contain !important;
}

.site-title {
font-size: 36px;
}
.pw-layout-horizontal { display: none; }
}

---

My hobby is to learn about new technologies and writing technical tips in my blog whatvwant.com
Google+ | Facebook | Twitter

[Erik D. Slater]

Firstly ... you only need to add it to the 480px media query ... and it will take effect for all widths below 480px, i.e. you don't need to add it to the 320px query as well. A similar case applies if you decide to include tablets, i.e. add to 767px and not 480px.

Secondly ... where did you add this? I'm not seeing it in your style.css file.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Jinka Varalakshmi]

Now i have placed like this

@media only screen and (max-width: 1023px) {
.pw-layout-horizontal { display: none; }
.footer-widgets,
.site-container,
.wrap {
max-width: 772px;
}

It is working now. Thanks for your cooperation.

---

My hobby is to learn about new technologies and writing technical tips in my blog whatvwant.com
Google+ | Facebook | Twitter

[Author]

Posts