The nav-items do not align in the center one under the other when the hamburger-button is active.
Tried several things like
#media screen and (max-width: 700px) {
.nav
Related
Site: https://borealisproductions.ca/
When the browser is re-sized the phone number on the left side of the page disappears, but the navigation menu on the right side of the page is responsive.
How can I fix this?
Those are the envolved lines in your CSS document:
#media screen and (max-width: 1200px) {
.phone-number-custom {
display:none!important;
}
It fix a breakpoint and removes the with that class, that's why it "disappear".
You can eliminate the rule, or fix it on onother breakpoint, for instance 768px:
#media screen and (max-width: 768px) {
.phone-number-custom {
display:none!important;
}
anyway that's up to your needs...
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
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)
hi all i have a little problem here i have some divs that i have positioned in below screen width
#media all and (min-width: 1024px) and (max-width: 1399px) {
.logo{margin-top:70px;}
.menu_bt{display:block; margin-left:30px;}
.search_bt{display:block; margin-left:30px;}
}
so i above u can see i have positioned some divs and i have shown some hidden divs and they are looking fine on above screen width but when i change browser width to 768px it doesn't show the styles i have set in 1024px screen width for e.g(.menu_bt and .search_bt) i have changed them from display:none to display:block but they doesn't show up in 786px screen width.i have to set those above properties in below mentioned screen width to get them ....i dont know whats the issue please help me out
#media all and (min-width: 768px) and (max-width: 1023px) {
.logo{margin-top:70px;}
.menu_bt{display:block; margin-left:30px;}
.search_bt{display:block; margin-left:30px;}
}
How to center 3 images in a row at 480px screen width, and 2 images at 320px?
Here is JSFiddle Demo
<ul>
<li><img/></li>
...
</ul>
#media (max-width: 480px) {}
#media (max-width: 320px) {}
Put a display: inline-block; on your <li> and text-align: center; on your <ul>. This way your images will allways be center aligned. In your media queries you can set the width of your <ul> (display: block;) so you'll have the correct amount of images lined next to each other.
example:
http://jsfiddle.net/skeurentjes/qfrRG/2/
Something like this does the job:
http://jsfiddle.net/isherwood/qfrRG/4/
#media (max-width: 480px) {
/* would like 3 centered images in a row */
img {width: 30%; margin-left: 2%;}
}
#media (max-width: 320px) {
/* would like 2 centered images in a row */
img {width: 45%; margin-left: 5%}
}
Adjust widths and margins to suit.
Is this something like what you were looking for?
Just beware it uses some attributes that aren't available in old browsers. Specifically nth-child();