I am using the wordpress twenty twelve theme
I am unable to turn off the menu at 800 px, using media queries.
my site
Try setting in your style.css
#media screen and (max-width: 800px) {
.menu-main-menu-container{
display:none;
}
}
This will make the main menu 'disappear' under 800px window width.
Related
I am using OceanWP theme and I am having trouble removing the main menu on mobile only. Do I need to go into the theme's code or remove it a different way?
Try with below code or Find the class name and use css to with display:none with media query.
#media only screen and (max-width: 600px) {
nav{
display:none;
}
}
I have an css issue about one plugin on responsive view and I want to hide on mobile. I want to use another plugin only for mobile view. How can I do that?
You can use media query for hiding element on desktop and mobile
#media only screen and (max-width: 767px) and (min-width: 200px) {
.container_mobikle{
display:block !important;
}
}
I have a responsive wordpress theme but my featured boxes are not responsive in tablet or mobile mode. They appear stretched out and much bigger than their original size. I tried adding media queries to the css stylesheet and using various plugins but I don't know what else to do. All the other images on my site are responsive on all devices.
This is the media query I tried using:
#media screen and (min-width: 1024px) and (max-width: 1139px) {
div.featured-box {
margin-top: 135px;
}
}
#media screen and (min-width: 1140px) {
div.featured-box {
margin-top: 70px;
}
}
thank you for your help!
I am building a website with wordpress.
The url is here
My problem is that the menu is overlapping with the logo until the screen size is 1300px ... can i force the mobile / burger menu to appear until it has 1300px or is there any other solution for this?
Try this:
#media only screen and (max-width: 1300px) {
.main_menu {
display: none !important;
}
.mobile_menu_button {
display: table !important;
}
}
Here's an example of using media queries to drop you navigation below your logo if the screen width is above 1300px, and below 1500px (since it looks fine on wide screens).
#media (min-width: 1300px) and (max-width: 1500px) {
header .header_inner_left {
position: relative;
left: 0px;
top: 0;
}
}
You'll have to add this to your stylesheet and play around with the dimensions of your query, but this should solve the collision issue. You can also use media queries (like your theme is doing when it turns the navigation into a hamburger stack navigation) by switching styles in your stylesheet based on the screen size. There are more than one styles that are being modified to create a functional mobile navigation, so this route may be the easiest if you want to avoid needling through the core theme code.
Hope that helps! Good luck :)
I have made a homepage for my fathers birthday. When changing screen size or using his ipad the header is collapsing on a header. If you try to change screen size on test.virumfarveogtapet.dk, you can see exactly what i mean.
Any suggestions?
Looks like a CSS media query error. Try adding this CSS rule.
#media all and (max-width: 1026px) and (min-width: 767px){
.elementor-element.elementor-element-6fcfdccd.elementor-widget.elementor-widget-heading {
margin-top: 90px;
}
}