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;
}
}
Related
https://staging-digemaya.kinsta.cloud/membership/
I have removed the div's using
.page-id-16713 .cta-2-banner-2 {
display: none
}
.page-id-16713 .quotes-wrapper {
display: none
}
however, they still display on tablet and mobile. I have searched everywhere and nothing is working.
I used the inspector tools on your site, and it looks like there's a media query being applied to those styles. Try moving
.page-id-16713 .cta-2-banner-2 {
display: none
}
.page-id-16713 .quotes-wrapper {
display: none
}
to the top of the stylesheet instead of the bottom and see if this fixes the issue.
For future reference, you should try to keep your #media queries at the bottom of your CSS. You can read more on this here
It appears that the css you shared is not in a media query when quickly looking through the html from your site, however the browser inspector tool shows that it's in a media query (2x):
#media screen and (min-width: 768px)
#media screen and (min-width: 768px)
.page-id-16713 .cta-2-banner-2 {
display: none;
}
This means there might be invalid css somewhere before this property that is causing trouble. Browsers try to make sense of these things and that's why it's in a media query. I recommend a w3c validator or taking all your css into your code editor and combing through it.
The quickest fix (although not the recommended cause the real invalid issue should be resolved to prevent future trouble):
#media only screen and (max-width: 40em) {
.page-id-16713 .cta-2-banner-2,
.page-id-16713 .quotes-wrapper {
display: none
}
}
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 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;
}
}
I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove() and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.
Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:
#mySlider{
display: block;
}
#media (max-width: 640px)
{
#mySlider
{
display: none;
}
}
You can hide an element and show another depending on screen size using media query from css , this is from one of my live projects (I use this to show/hide icon)
#media only screen and (max-width: 767px) and (min-width: 480px)
{
.icon-12{ display:none; } // 12 px
.icon-9{ display:inline-block; } // 9px
}
Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.
#media screen and (max-width: 480px) {
.nomobile {
display:none;
}
}
You can also use jquery function addClass() and removeClass() or removeAttr() to fulfill your purpose.
Example:
$(window).resize(function(){
if(window.innerWidth < 500) {
$("#slider").removeAttr("style");
}
});
Or you can also use media query as follow :
#mySlider{
display: block;
}
#media (max-width: 500px)
{
#mySlider
{
display: none;
}
}
I've got some CSS and media queries which hide and show my navigation:
So by default the navigation is:
nav {
display: inline;
}
Then using media query I hide it:
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
All works perfectly well, I then have some JavaScript hooked up to a button to show and hide the navigation when the media query is in effect.
However when I resize the browser back to full screen, larger than 767px the navigation does not reappear. How can I get the navigation to appear for desktop users?
bind the jquery resize handler to the window like this
$(window).resize(function(e){
if($(window).width() > 767){
$('nav').show()
} else {
$('nav').hide()
}
})
there is probably a few optimisations you can do with caching objects but this should get you want you need to start with
#media all and (min-width: 768px) {
nav
{
display: inline!important;
}
}
Kai Qing's answer helped me realise that I just needed to override the inline CSS the jQuery .toggle event was adding - Inside the correct media query of course.
You can make the js add a class to the nav and use !important to overwrite the media query statement...
nav {
display: inline;
}
.force_display{
display:inline !important;
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
just add force_display class in the js function (assuming you're using jquery)...
$('#button').on('click', function(){
$('nav').toggleClass('force_display');
});