I have a blog http://bdbloggerhub.com . It's fine in pc but when i visit it with mobile or tab it shows a blank pic above the post pic. How to remove it?
try adding .img-thumbnail{display:none;} at the end of your styles.
or for particular screen size add the following styles.
#media only screen and (max-width: 479px)
.img-thumbnail {
display none;
}
#media only screen and (max-width: 767px) and (min-width: 480px)
.img-thumbnail {
display:none;
}
you can also use the {width:0; height:0} properties in place of {display:none}
Related
I'm trying to set some styles on a page with basic CSS and when I refresh the page to see expected results, all I can see that chrome uses styles from another query which it shouldn't do, when I browse from my phone I see styles from #media (max-width:1220px) and (min-width:965px) when it should show styles from #media (max-width: 767px). Anyone had this problem before?
##media (min-width:1221px) {
//some style
}
/* Tablets and very small desktop screens (if some) */
##media (max-width:1220px) and (min-width:965px) {
//some style
}
/* Tablets and very small desktop screens (if some) */
##media (max-width:964px) and (min-width:768px) {
//some style
}
##media (max-width: 767px){
//some style
}
Try this, remove ##media and put one #media
#media (min-width:1221px) {
//some style
}
/* Tablets and very small desktop screens (if some) */
#media (max-width:1220px) and (min-width:965px) {
//some style
}
/* Tablets and very small desktop screens (if some) */
#media (max-width:964px) and (min-width:768px) {
//some style
}
#media (max-width: 767px){
//some style
}
Hello friends i have a website in which there are two headers , one header appears on mob view and other one appears on desktop view .I have used #media to hide and show the headers ,it works fine until i tilt my mobile. when i tilt my mobile the hidden header pops out here's a piece of code i used.
#media only screen and (max-width:767px) {
.mobcat{
display: none;
}
You could simple add (orientation: landscape) to your query like this
#media only screen and (max-width:767px) and (orientation: landscape)
{
.mobcat{
display: none;
}
}
or
#media (max-width:767px) and (orientation: landscape) {
.mobcat{
display: none;
}
}
In my responsive website I want to control the way the website is viewed in mobile devices, and forbid viewing from landscape mode.
I searched through the stackoverflow site and found the option of putting a warning message.
I tried the css code below but it didn't work. Do you have any suggestions?
#media screen and (max-width: 980px) and (orientation:portrait){
#warning-message {
display:none;
}
}
#media screen and (max-width: 980px) and (orientation:landscape){
.content {
display:none;
}
.mobile {
display:none;
}
#warning-message {
display:block;
}
}
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
#media all and (orientation:portrait) { … }
#media all and (orientation:landscape) { … }
Source : https://www.w3.org/TR/css3-mediaqueries/#orientation
Is it possible in Firebug (Firefox Web Development add-on) to display which media query rules are currently active?
E.g.: I monitor a div element as usual. Then I scale the browser window to be smaller than 400px (or use the Firefox web dev screen size tool). I want to see a list of rules that are currently active for this element like this.
#media screen and (max-width: 400px) {
div { float: left }
}
Is that possible with Firebug or a similar tool?
You can use something like this, to show what mediaquery is currently working, please update with your mediaqueries:
The div will print what mediaquery is 'on', so you can hide the div, and use it only for development purposes.
#media (min-width: 400px) {
.mediaq:after {
content:'min 400'
}
}
#media (min-width: 800px) {
.mediaq:after {
content:'min 800'
}
}
#media (min-width: 1200px) {
.mediaq:after {
content:'min 1200'
}
}
<div class="mediaq"></div>
I am new to responsive design and i didn't get it properly till now. My question is that i need to write two media queries for 480*800 and 480*856 device for both landscape and portrait mode. Please explain it to me how it works ?
I have tried this query and it seems working for both the devices in landscape mode
#media only screen and (min-width:480px) and (max-width:854px) and (orientation:landscape)
#media all and (max-width: 480px) and (min-width: 480px) and (min-height:800px) and (max-height:856px)
{
body {
background-color:lime;
}
}
This would target both devices with the same css code.
Alternatively you could split it into two media queries and target each platform.
When I was new to responsive design I found this article very useful: http://css-tricks.com/css-media-queries/
You can try the following css styles:
media screen (max-width: 480px) and (max-height:856px) {
//code
}
media screen (max-width: 480px) and (max-height:800px) {
//code
}
media screen and (max-width: 856px) {
//code
}
media screen and (max-width: 800px){
//code
}