My navbar is supposed to be responsive. How can I hide the other links apart from a logo link called logo when the screen size is less than 680px? Thanks.
Try using a media query like this
#media screen and (max-width: 680px) {
.navbar a:not(:first-child) {
display: none;
}
}
Assuming that your logo link is an anchor (a)
Related
I have a website with a full width Slideshow in the header.
The images in the slideshow cannot be cropped.
Right now i set that my slideshow allows has width: 100% and a variable height.
The problem is that on phones (due to the different screen proportions) the slider looks super slim.
As I already said: I cannot crop the images. so i probably have to create a new slider for mobile devices.
What is the best way to do this?
If i just do something like:
<div class="mobileslider">
for mobile devices and
<div class="slider">
for desktops, I could hide one element via css.
However, both sliders would load, wont they?
Whats the most efficient way to do this?
Thank you for your help.
You should just be able to hide the element and display the other one with a couple of media queries based on screen size.
#media only screen and (max-width: 480px) {
.slider {
display: none;
}
}
#media only screen and (min-width: 768px) {
.mobileslider {
display: none;
}
}
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
Currently at full size I have my nav bar set up in horizontal manner.
I achieved it by using float left.
Now I am trying to make responsive website and how do I remove float left so it would be back to horizontal again?
You could use media queries to set your responsive widths. When the screen is under your desired screen width, change the float. See example below:
nav { float: left; }
#media only screen and (max-width: 500px) {
nav { float: none; }
}
More info on media queries can be found here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
I'm not sure if I will be able to explain it clearly and if this is possible. I only have a basic grasp of HTML/CSS. I'm looking for a way to have a floating element not float when viewed from a smaller screen (mobile device). I have an image floating on the left side of a paragraph, but when viewed from mobile, the image with the text side-by-side gets too crowded. Is there a way to make it float on the left side normally, but appear on top of the text when viewed in smaller screens? Thanks!
What you need is to define Media Queries. Media queries are like css triggers that defines in which resolutions certain rules will be applied.
.div img {
float: left;
}
/*This will cause the img receive float none rule when screen is smaller than 768px*/
#media only screen and (max-width: 768px) {
.div img {
float: none;
}
}
There is a complete guide you can check out right here.
Using media queries should be what you need.
For example.
#media only screen and (max-width: 768px) {
.content {
float: none;
}
}
Basically that says if the screen size is less then 768px then the class content won't have any float.
What you are looking for is called MediaQueries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You will need something like:
#media screen and (max-width: 400px){
yourelementselector {
... your CSS...
}
}
I have a menu bar in html page, it should display only if the
screen resolution is 800x400px. how to achieve this using css3/css only not by using javascript.
first you should keep the menu bar display:none and then something like this
#media all and (width: 800px) and (height: 400px) {
#menubar {
display:block;
}
}