I want to hide the facebook like box with CSS.
I used this:
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
but this works but only for big displays and it's still showing on mobile.
When I resize the webpage on desktop and make it smaller in width, there is a tipping point where the responsive changes and the fb-like-iframe is displayed.
I tried using this to hide it on mobile as well but no success do far:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
}
Instead of min-device-width and max-device-width you can use min-width and max-width.
Or better result you can use only max-width..
/* Smartphones (portrait and landscape) ----------- */
#media only screen (max-width : 480px) {
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
}
currently you are using this:
#media screen and (min-width: 768px)
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
just change (min-width: 768px) to (max-width: 768px)
let me know if this is what you need
There was conflict of style.css with a minified version that was causing it not to work only on mobile.
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
I've fixed it and now the original code (above) works on both desktop and mobile. Thanks
Related
I tried searching on the internet for an answer and I couldn't find one that worked. I want to make my site responsive to mobile where the li elements become smaller on the screen when vertical. This is my code, I did put in a link to the style sheet where it is and did put the meta viewport part in the heading section.
#media only screen and (max-width: 400px) {
.list {
width: 30px; height: 20px;
}
}
Here are some common standard points:
#media (min-width: 320px) { /* for iPhones and smartphones */ }
#media (min-width: 481px) { /* for larger phones and small tablets */ }
#media (min-width: 600px) { /* for tablets */ }
To be honest, it would be really helpful if there was such thing as #media (min-size: iPhone) or #media (min-size: windows_tablet); it would make it a whole lot easier.
I have built a website siavoush-re.co.uk and have used media queries to adjust it to small screens.
I first made a default style so the website fits my 1280px screen and then used min width media queries from 240px to my regular size. So it looks something like this
default css
#media (min-width: 240px) { //style }
#media (min-width: 320px) { //style }
......
#media (min-width: 1280px) { //style }
What I wanted to know is if there is way to undo all the changes done in the previous breakpoints and have it revert to the default style once the width reaches 1280px?
Sounds like you want max-width-- 'change to this css up until this size'.
You can also combine these queries depending on your needs, for example:
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-width : 768px) and (max-width : 1024px) {
/* Styles */
}
I've been reading a lot about RWD and really wanted to give it a go so I have a website to build for a friend and thought it would be a good tester. I watched a video on YouTube that said if you were starting from scratch building a site and want it to be responsive, build it from the smallest viewport then scale it up as you go a long, so this is what I am doing.
However, my first CSS media query:
#media only screen and (min-width: 480px) and (max-width: 767px) {
body {
background: #000;
}
Once the device / browser reaches a min width of 480px and I want the background to go black (purely for testing purposes) it doesn't seem to respond.
Here is the code for my website: http://jsfiddle.net/F6Xbp/
Originally I did have a media statement that said:
#media only screen and (max-width: 479px) {
}
This was where I began building the website, but i removed this as I thought that as each viewport is recognised, the styles would be over-ridden so I could use the max-width: 479px as my base starting point.
I look forward to hearing some replies and no doubt I'm overlooking something so simple here.
Keith :-)
Updated jsFiddle
You need to put the code you want to change within the #media queries and makes sure they don't overlap each other (or are at least positioned in sequence to where it doesn't matter if they are). As you had it the bottom most media query was overriding most of the others
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
body {
background: #000;
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
body {
background: red;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {
background: green;
}
}
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (min-width: 959px) {
body {
background: blue;
}
}
I made it work: http://jsfiddle.net/F6Xbp/1/
Technique 1
#media screen and (max-width: 480px) {
body { background-color:black; }
}
Technique 2
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
body { background-color:black; }
}
For the difference between max-width and max-device-width, see this.
I have this problem...I am running page http://exploreprague.cz. In the right upper corner I have ribbon. But when I am looking on it on my tablet, its's overlapping my menu. So I figured that if there is way to show different picture(different kind of ribbon, not just differently styled) it could work. But I don't know if there is some kind of HTML/CSS/JS trick which can do it. Thanks
One of the better ways to achieve what you want would be to use CSS3 Media queries.
In the CSS file targeted at tablet-sized resolutions, you could set display:none on that particular image, and replace it with a new image that fits in with your smaller resolution better if you prefer.
For example (iPad portrait/landscape resolution):
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#oldImg { display:none; }
#newImg { display:block; }
}
Here is an example of how to use a responsive css:
Large desktop
#media (min-width: 1200px) {
#largeImage{
display: inline;
}
#smallImage{
display: none;
}
}
Portrait tablet to landscape and desktop
#media (min-width: 768px) and (max-width: 979px) {
#largeImage{
display: none;
}
#smallImage{
display: inline;
}
}
Landscape phone to portrait tablet
#media (max-width: 767px) {
/* do the same as tablets or include this width range in the tablet style*/
}
Landscape phones and down
#media (max-width: 480px) {
/* do the same as tablets or include this width range in the tablet style*/}
Just set the image display property according to the width of the screen.
use 2 images one with
display: none;
and the other with:
display: inline;
and switch between them on a narrower screen
I am creating a mobile application in which I am getting some error.
here my core style is for desktop:
.abc{
width:1001px;
}
#media only screen and (max-width : 320px) {
.abc{
width:320px!important;
}
}
#media only screen and (max-width : 480px) {
.abc{
width:480px!important;
}
}
Here from the above styles only the style of 480px is applying for both the 320px and 480px.
Is there any alternate suggestion to come over this problem.
This is because max-width:480px; still targets 320px too. Change the last one to:
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc {
width: 480px !important;
}
}
and this will stop that query affecting anything below 321px.
It doesn't look like you need !important This fix has nothing to do with that so I would remove that if I were you, it may mess things up in the future
An alternative solution would be to move the 320px query below the 480px. They both have the same specificity so the one that comes last in the cascade would take precedence.
set a min-width
.abc {
width: 1001px;
}
#media only screen and (max-width: 320px) {
.abc {
width: 320px;
}
}
/* set a min-width here, so these rules don't apply for screens smaller than 321px */
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc{
width: 480px;
}
}
If I'm right you should be able to remove the !important syntax too...