I have made a menu bar but when i re-size the window the menus leave their position. I want them to auto adjust please suggest how i can achieve this.
here is my fiddle link:
[Fiddle][1]
[1]: http://jsfiddle.net/c9ssy2dj/
look at this fiddle i made for you:
http://jsfiddle.net/0w8t31k9/
however you have to edit it because i made it real fast from something i made.
mediaqueries look like
#media only screen and (max-width: 770px){
/* css you want to overwrite */
}
you can find the documentation and the script here: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
Related
I read somewhere that it can be done with Elementor (reference), but can it be done any other way?
Now it's set on 600px, but I want it triggered at 1200px. Is this possible?
Yes, you can use the CSS code to hide and show the menu on a specific device size.
You can use the following CSS code.
#media(max-width:1200px)
{
.YourDesktopMenu{
display:none !important;
}
.YourMobileMenu{
display:block !important;
}
}
This CSS code helps to hide the desktop menu and show the mobile menu for the lower screen then 1200px.
So I am trying to hide two of the six user photos (the last two) when on a mobile/small screen. I know, I will use an #media code but what code would I write that would hide the last two photos?
The code on my site is quite extensive, so it would probably be easier to visit the page in question and use "inspect" to see the code. I have tried to hide the img(s) with some css code but it didn't work. So I have no idea what I am doing wrong! See the page in question # Zoeaa.com
Would really appreciate the help and feedback!
If there is anything, I can do to improve this question, please let me know!
Photo of the issue
Something like this
//for screen size smaller than 768px (mobile)
#media only screen and (max-width: 768px)
{
//hide the last two list items
.pop_members ul li:nth-last-child(-n+2) {
display:none;
}
}
This will hide the last two list items from the list when the screen size is smaller than 768px.
Maybe you can do it like this. I always use this method when I want to hide something on the webpage, with this you can hide any element you want
but it still depends to the structure of your code. there are many ways to hide an element. I hope this helps you!
#media only screen and (max-width: 768px) {
//Create Class that will only hide on mobile size.
//Add the class desktop-only to the image(or LI) that you want to hide on mobile view.
.desktop-only {
display: none;
}
}
Is it possible to hide a div with (or without) Bootstrap 4 if the screen width is over/under a specific value? Does it need javascript for that?
More specifically, I'm looking for hiding a specific text (that I find useless on a mobile screen). I tried classes like "hidden-sm-up" but I couldn't make it work. Sorry if it's a basic question...
media queries in CSS are what you are looking for.
.mydiv{display:block; /*default behavior*/}
#media only screen and (max-width: 400px) {
.mydiv{display:none; /*hide div on all screens with 700 and lower width*/}
}
(try dragging the divider between js and outpuut block)
https://jsfiddle.net/qaabhmou/
more you can find here:
https://www.w3schools.com/css/css3_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I'm working on a template page for a website.
It can be seen here : http://www.acielouvert.net/clos/
In the header, I have a slideshow with images width of 100%, they resize with the browser.
When I resize the browser below 960px I want div .continue to stay in touch with div.header.
Actually I put a margin-top: 700px on div .continue.
Have you any idea how can I do this ?
I don't want to use media queries.
Please see here the code for the page : http://pastebin.com/gLaerw1F
Thanks,
Guillaume
Something like this.
#media screen and (max-width: 960px) {
// What ever you want ...
}
I did some several test and the only way I found is using % for the margin-top of .continue
When user resize the browser below 960px, the two divs are stuck together and I avoid the gap due to margin-top: 700px;
I will surely add some media queries in the end but the % is helping a lot.
Thanks for your help #Junaid, #Josh Burgess, #jurgemaister.
My website is Verdacci.com
My question is, when viewing the website on desktop (not responsive version), I would like to center the menu vertically. So the menu is always in the center of the screen. Can somebody help me to do this? I don't want to change any code except the CSS.
Also note that if the screen size height reduces to less than 600px (i think its 600), the menu is replaced with a mini menu. I would like this functionality to remain.
I have tried quite a few things already with no luck. My CSS skill is not very high so please try to explain in as simple terms as possible? Thank you!!
To center something in CSS you can do this:
.yourclass {
margin-left: auto;
margin-right: auto;
}
Add this class to your menu and it should work.