I have used Bootstrap extensively and regularly used the css classes to hide various elements from mobile view. Does Skeleton CSS have a similar thing for hiding content on a mobile?
Used a media query example below:
#media only screen and (max-width: 500px) {
.someStyle {
background-color: display: none;
}
}
Related
I was designing a wordpress page with elementor. The site is perfect in desktop. But while on mobile, the first section of the elementor is not displayed. Is there someway I can fix this with custom php code?
The issue is caused by CSS code,
The following CSS code is causing the div height to be 1px which makes it invisible:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full>.elementor-container {
height: 100%;
}
The expression
#media (min-width: 768px)
Applies the code only for screens with a higher width than 768 which makes it unsupported for mobiles.
To fix this you need to apply the following code to your custom CSS:
#media (max-width: 768px)
.elementor-section.elementor-section-height-full>.elementor-container {
min-height: 350px;
}
Give it a try and let me know.
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 :)
Im using pretty photo on my web, it works good, but i find it useless in mobile, so im trying to hide it in the media query by using display none, but the problem is that im not shure what is it that i have to hide. Thanks!
Put it in a div with a class and hide this one:
.gallery-container {
display: block;
}
#media screen and (max-width: 600px) {
.gallery-container {
display: none;
}
}
My Theme Was Supposed To Be responsive But when I uploaded Logo In My Site, It stop Being Responsive. So can i have one logo(big) for non-responsive design and other (small) for responsive design.
When would you want it to be responsive and when would you want it to not be responsive? Most of what you sound like you want to achieve could be done through media queries.
.logo{
background-image: url(images/image_nonresponsive.jpg);
}
#media (max-width: 320px) {
.logo{
background-image: url(images/image_responsive.jpg);
}
This will enable your responsive logo at 320px width.
There is another method:
HTML
<img src="logo_mobile.jpg" class="visible-mobile" />
<img src="logo_desktop.jpg" class="hidden-mobile" />
CSS
.visible-mobile{ display: none; }
.hidden-mobile{ display: inherit; }
#media (max-width: 320px) {
.visible-mobile{ display: inherit; }
.hidden-mobile{ display: none; }
}
This will show or hide your logo depending from your screen size.
You can see an example here: http://cdpn.io/wyqxz
The difference is that in this case both images will be loaded from your browser so is not the best solution for your site performances.
new to css3 media queries and responsive design.
I would like to know how to show something (say a div) on small screens only but not on large screens.
I've tried something like:
#media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
...
and anything larger has eg:
#media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
it doesn't seem to work as intended.
might be worth pointing out that i'm using bootstrap 2.0
It's a better practice to make all your default style mobile-friendly and then use min- media queries to size up:
div { /*put whatever your default styles are first*/ }
/* Then use the media query to hide it at 481 and wider */
#media all and (min-width:481px) {
div { display:none }
}
Look at 320andup and Skeleton and the CSS of this page for examples. Look at the helper classes towards the bottom of this CSS for differences between invisible/hidden etc.
You can put this first
/* for small screens, only execute in if statement */
#media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
visibility:visible!important;
display:block!important;
}}
Then at the bottom of it put it for large screens (always execute since not in if statement)
.smallOnly {
visibility: none;
display: none;}
The important tg makes it so that anything with important always overwrite everything else and it will be the master rule regardless of where it is in the file.