I am using a wordpress responsive theme, however I need the footer to not appear on any screen size smaller than an ipad. When viewed on an iphone 5 size screen the footer is too bulky and on some pages covers the content. In this instance it would be much neater to remove this for mobile phone size screens. Is there a CSS command, or any alternate method, to remove the footer below a certain screen size?
Many thanks in advance, Phil
I would say :
#media (min-width: 0px) and (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
Or shorter :
#media (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
A CSS media query should work
#media only screen and (max-width: enter breakpoint) {
#footer {
display: none;
}
}
Related
We have our website in wordpress, below is the link for your reference.
https://timesandtrendsacademy.com/
There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode.
I have put some custom css for the same for full width look, below for your reference,
.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}
#media only screen and (max-width:500){
#branches{width:100%;}
}
It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width.
It is showing in a 150px width size that is not looking good in mobile devices.
we have to add some css or media query to reflect proper on all the devices.
Please advice us.
Thanks,
Gopal
That's because there's a style with a !important that overwrites your styles.
#media only screen and (max-width: 800px) and (min-width: 320px) {
#foobar-message-0 {
margin-top: 10px;
width: 150px!important;
}
}
Remove the !important, edit the style, or use a more specific selector with !important.
Example:
#media only screen and (max-width: 800px) {
#foobar-message-0 {
width: 100%!important;
}
}
These styles should be after the styles to overwrite.
Add this css in style editor
#media only screen and (max-width: 767px){
.foobar-container-inner {
margin-left: 0important;
width:100%!important;
margin-top: -40px!important;
}
#foobar-message-0 {
width:100%!important;
}
}
I am trying to make a site responsive, and when it scales down, I want to cancel out the images. All my images are in HTML and I am trying to make them not show up as the screen scales down.
For this you can use media-queries.
Example:
#media screen and (max-width: 768px) {
.image-1 {
display: none;
}
}
This will not display the image when the screen size (width) is smaller than 768px.
You can learn more about media-queries here.
CSS media queries are used for this
#media only screen and (max-width: 600px) {
/* anything here will have properties mentioned here
if you want to hide all the images, use "img", else, use your specified class, such as .myImage */
img {
display: none;
}
/* OR */
.images-to-hide {
display: none;
}
}
In (max-width: 600px), you put the maximum screen width after which the styles stop working - or rather - the minimum value needed for these styles to be applied
Here's a more detailed tutorial: W3Schools.com - Media Queries
I want to know if it is possible for my front page to load an image dedicated for mobile users only. I know it is possible with javascript, but I want to know if I can achieve the same using CSS only. I have tried to do some research but can't find what I am looking for. I do not mean resizing the image based on the screen size, but loading a mobile-friendly image.
Make use of media query to change background-image at different screen resolutions as below,
div{
width:100%;
height:400px;
background:url('http://placehold.it/350x150/f22/fff');
background-size:100% 100%;
}
#media screen and (max-width : 480px){
div{
background:url('http://placehold.it/480x150/f12/fff');
background-size:100% 100%;
}
}
#media screen and (max-width : 320px){
div{
background:url('http://placehold.it/320x150/e12/fff');
background-size:100% 100%;
}
}
<div></div>
Check this jsFiddle.
You can use media queries to apply classes depending on the screen size.
#img {
display: none;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
#img{
display: block;
}
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Yes this is possible. You can use Media Querys. Example CSS:
#yourimage {
display: none;
}
#media (max-width: 500px) {
#yourimage {
display: block;
}
}
This code is for html images tho. Here is a JSFiddle:
https://jsfiddle.net/vqfLokpa/
Just hit run and then start to make your browser window smaller.
Based on your comment to #NullDev, you will need to create a div at the appropriate size and apply the image as a background image on an element in order to condition what is loaded via CSS.
For example:
HTML:
<div id="image"></div>
CSS:
#image {
position: relative;
width: 400px;
height: 400px;
background-image:url('/path/to/image');
background-size: cover;
background-repeat: no-repeat;
}
Then apply the media query:
#media only screen and (max-width : 480px) {
#image{
background-image:url('/path/to/mobile/image');
}
}
I hope this helps.
I am trying to use #media query to hide a span for tablet screen only like this:
#media screen and (max-width: 600px){
.tablet-screen {
display: none;
}
But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?
You have to use both. Under 600px it's not tablets, but smartphones.
You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)
Demo : https://jsfiddle.net/Zetura/453gh680/
#media screen and (min-width: 600px) and (max-width: 1280px){
.hide-tablet {
display: none;
}
}
If you use min-width then increase it from top to bottom. Sequence matters!
#media screen and (min-width:220px) { ..... }
#media screen and (min-width:500px) { ..... }
#media screen and (min-width:700px) { ..... }
#media screen and (min-width:1000px) { ..... }
CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.
And you don't need to use both at same time.
max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)
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