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;
}
Related
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.
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 wrongly edited some code in css media queries a time ago and now on mobile devices the logo of my website look like this:
.
The url of my page is: SplashYourCash.com
I cant get it to back to fill out the right space, maybe someone of you has an idea?
much greetings,
herrsocke
If you add the following CSS to your mobile media-query:
.navbar-toggle {
margin-right: 0;
}
It should fix it.
Try this at the bottom of your style.css file
#media all and (max-width: 380px) {
.logo {
height: 62px;
}
.logo.logoshrink {
height: 50px;
}
.navbar-toggle{
margin-top:27px;
margin-right:0;
}
.navbar-toggle.mt8{
margin-top:8px;
}
}
I am trying to hide a div on both a tablet device and a desktop. I am using zurbs foundation http://foundation.zurb.com/docs/layout.php to do so. However when I try to apply the classes hide-on-tablets & hide-on-desktops the second one overrides the first one somehow and the hide-on-tablets shows up on a tablet. I can create my own media queries and hide them on both but I figure I should take advantage of classes or what's the point of having all the code. You can view it on my site at http://goodmorningmoon.ca by resizing the browser. The password for the site is springy88
Thanks in advance.
foundation.css visibility
/* --------------------------------------------------
:: Mobile Visibility Affordances
---------------------------------------------------*/
.show-on-phones { display: none !important; }
.show-on-tablets { display: none !important; }
.show-on-desktops { display: block !important; }
.hide-on-phones { display: block !important; }
.hide-on-tablets { display: block !important; }
.hide-on-desktops { display: none !important; }
/* Modernizr-enabled tablet targeting */
#media only screen and (max-width: 1280px) and (min-width: 768px) {
.touch .hide-on-phones { display: block !important; }
.touch .hide-on-tablets { display: none !important; }
.touch .hide-on-desktops { display: block !important; }
.touch .show-on-phones { display: none !important; }
.touch .show-on-tablets { display: block !important; }
.touch .show-on-desktops { display: none !important; }
}
#media only screen and (max-width: 767px) {
.hide-on-phones { display: none !important; }
.hide-on-tablets { display: block !important; }
.hide-on-desktops { display: block !important; }
.show-on-phones { display: block !important; }
.show-on-tablets { display: none !important; }
.show-on-desktops { display: none !important; }
}
MY HTML
<div class="row touch">
<div id="iphoneNav" class="four columns hide-on-tablets hide-on-desktops">
<?php wp_nav_menu( array( 'theme_location' => 'iphone-menu','menu_class' => 'nav-bar', 'container' => 'nav') ); ?>
</div>
</div>
You really need to check out this then.
http://www.w3schools.com/css/css_mediatypes.asp
You can define different types of Style Sheets for Different Types of Devices your Website is being viewed on.
Hope that helps!
Aaron
Take a look at version 3 of Foundation: http://foundation.zurb.com/docs/media-queries.php & example in: http://foundation.zurb.com/mobile-example3.php
Use .show-for-small
If you need it for smaller device than 767px, roll your own mediaquery.
Cheers
I think you only need one of them:
https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Whs4dZaS31U
I hope it helps
.touch gets added by Modernizr to the body element - you don't need to do anything for that. It's so we can tell, when a device is
1280x768 for example, if it's a desktop or tablet.
The trick to the .hide-on-x and .show-on-x classes is that you only
ever need one. There is an implied 'only' in there, as in
'hide-only-on-tablets'. That should be the only one you need.
(Source: https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Whs4dZaS31U)