I'm trying to toggle my mobile menu at 1172px as the default is 850px but it's not working.
My web is: www.maria-educandoconamor.com
I'm current using the following css to achieve it:
#media only screen and (max-width: 1172px) {
.header-nav, .header-nav-main, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none !important;
}
.mobile-nav, .nav.nav-left {
display: flex !important;
}
}
But unfortunately it's not working.
Does somebody know what I'm doing wrong?
Thanks.
Related
my website's main menu responsive breakpoint is at the 850px for mobile menu. Though I want to change it to a mobile menu from 1369px, as the desktop main menu after 1369px overflow the site content. I have tried CSS such as:
#media only screen and (max-width: 1369px) {
.header-nav.header-nav-main.nav.nav-left.nav-line-grow.nav-size-small.nav-spacing-medium.nav-uppercase {
display: none;
}
.mobile-nav.nav.nav-left {
display: block; !important:
}
}
Thus it only hides desktop menu but no hamburger menu appears...
Could somebody advise me how to change this breakpoint correctly? p.s. I am an amateur beginner in web development.
Thank you in advance.
you may add another breakpoint to your css file easily by adding #media :
#media only screen and (max-width: 1369px) {
.header-nav, .header-nav-main, .nav, .nav-left, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none;
}
.mobile-nav, .nav.nav-left {
display: block; !important:
}
}
I would like help with code that will show a different slideshow section on Shopify based on the users screen size. I am using the code below which works great on a mobile device but on my laptop I see both slideshows.
What code do I need to add to hide the mobile slideshow when the screen size is above a certain amount of pixels?
#shopify-section-mobile-slideshow {
display: none !important;
}
#media (max-width: 450px){
#shopify-section-slideshow {
display: none !important;
}
#shopify-section-mobile-slideshow {
display: block !important;
}
}
Question answered by #stenley -
Use inspector elements to ascertain the section ID
For me:
#shopify-section-1586161998623 { display: none; }
#media (max-width: 768px){
#shopify-section-slideshow {
display: none !important;
}
#shopify-section-1586161998623 { display: block; }
}
I am using Node child theme for my site. The header and menu works fine in the desktop mode but when it is shrinked to responsive mood the heading with menu disappeares. I have tried allmost all the options but none is working. I couldn't find any documentation of the theme and any specific solution on the net. My site url is-
http://onlineinternetquest.com/
Add This code in your mobile media query
header.edgtf-mobile-header {
display: block !important;
}
header.edgtf-mobile-header .edgtf-mobile-header-inner {
height: auto;
}
You have media-query in your css that says under 1024px display: none; to head.
See screen shot from F12:
So remove this media-query:
media only screen and (max-width: 1024px)
.edgtf-page-header, .edgtf-top-bar {
display: none;
}
can someone please help me about this Wordpress CSS problem. On the checkout page the payment methods float right and for some reason the method description text is 'vertical', instead of having sentences in the full row, only 2 or 3 letters appear in each row (image included).
When I change the window size (and on mobile) everything looks okay.
Can anyone help me with some css code which would fix this? I don't know how to edit stuff that isn't in styles.css.
The problem
when i resize the window / mobile screen
The link:
https://zelenakuca.com/checkout/
Thank you!
Paste media code with style before line code
</style><noscript><style type="text/css"> .wpb_animate_when_almost_visible { opacity: 1; }</style></noscript></head> in index page or file.
#media (min-width: 1025px)
{
#order_review {
width: 100%;
}
}
Please try these CSS:
#media (min-width: 1025px){
#order_review {
float: none;
width: 100%;
}
}
Hi I am looking for some help in regards to understanding why the following page does not show up on a mobile size screen (480px) as all the other pages that have been built show up fine.
http://leicesterbakery.co.uk/index.php/product
I have a module class suffix with the following styles within the media queries in order to control what is shown on a mobile and what is shown a desktop.
(media query with max-width: 480px)
.range_full {
display: none;
}
.range_resp {
display: block;
}
Normal CSS file
.range_full {
display: block;
}
.range_resp {
display: none;
}
Would appreciate it if somebody could advise as really cant work out this isnt showing up.
You have a display: none on .range_full
Change it to block and it will show:
#media (max-width: 480px) {
/***** BASIC LAYOUT *****/
.range_full {
display: block;
}
.range_resp {
display:block;
}
.fullrange_full {
display:none;
}