I can't figure out how to hide the logo image for mobile devices which is used for the background for my Age Verification popup. Here is the site with the pop-up logo in question: http://rocketcannabis.com/?itro_preview=yes
I got pretty close with the following code, but don't know how to isolate the image, I could only hide the whole pop with the #itro_popup class, I want just the image to hide on mobile, not the whole pop-up:
#media only screen and (max-width: 768px) {
#itro_popup {
display: none;
}
Use background-image: none
#media only screen and (max-width: 768px) {
#itro_popup {
background-image: none;
}
Try adding !important to display:
#media only screen and (max-width: 768px) {
#itro_popup {
background-image: none !important;
}
Related
I'm working on my personal WordPress site, and when using media queries in the WordPress theme customizer, my site does not respond to the changes I've made to the background.
I am running the Divi theme, and used Chrome's inspect element to find which class I need to be changing.
#media only screen and (max-width: 768px) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
I expect the background of each page to change to "echelon-enterprises.jpg" on desktop, and to "mobile-floor.jpg" depending on the screen size. What am I doing wrong here? Am I just targeting the wrong class? I have also tried the "et-main-area" class, still not luck.
You're missing px for the second declaration
#media only screen and (max-width: 768px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
Look at this page
There are 3 images on the right. When I look at my site with a mobile device, those 3 images stay there instead of centering in the middle, and so they make the page overflow/have a left-right scroll.
Any ideas on how I can fix it so that the images get centered when the page is viewed on mobile?
Thank you
Use a CSS media Query
The code used in the example you gave is
#media (max-width: 600px)
.about-us-images {
width: 100% !important;
}
The #media (max-width: 600px) part is telling the page to only apply those styles when a page width is 600px or less.
Adjust it to Your Preferences
You can adjust that to any size you wish or use the reverse to style any page that is 600px or wider using: #media (min-width: 600px).
Try this—
#media (max-width:600px) {
.about-us-text,
.about-us-images { width:100% }
}
Just add a class to the images div, and change the breakpoint as you wish. Looks like this now—
Here is what I had to do.
#media (max-width:600px) {
.about-us-text {
float: none !important;
width:100% !important;
}
}
#media (max-width:600px) {
.about-us-images {
width: 100% !important;
}
}
That did it.
I have 2 buttons on my website that have the same class of .ow-button-base. What I'm trying to do is make it so that one of these buttons does not appear when the website is loaded on a mobile device. This is the code that I'm using now:
#media screen and (max-device-width: 640px) {
.ow-button-base {
display: none;
}
}
When I use this BOTH buttons do not appear when the website is loaded on a mobile device. How do I make it so only one does not appear?
Simply add to one of the button (which you want to show on mobile device) ID, f.e my_button2:
#media screen and (max-device-width: 640px) {
.ow-button-base {
display: none;
}
#my_button2 {
display: block;
}
}
And your buttons:
<button class="ow-button-base" />
<button class="ow-button-base" id="my_button2" />
Then the second button will be shown also for mobile device.
If you'd like them to have the same class, use a selector that will find a specific instance:
#media screen and (max-device-width: 640px) {
.ow-button-base:nth-of-type(2) { // select the second instance
display: none;
}
}
You could target it using the :last-of-type blocker.
#media screen and (max-device-width: 640px) {
.ow-button-base:last-of-type {
display: none;
}
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a background image on my desktop site. However, because of the size it makes the mobile site slow and out of proportion. Is it possible to remove the background image for the mobile site or at least make it responsive?
Actually to hide background image here is the simple css:
background-image: none;
Here is the solution for mobile, i used media queries
HTML
<div class="bgimg" >
</div>
External CSS
/* Show in Large desktops and laptops */
#media (min-width: 1200px) {
.bgimg {
background-image: url('../img/your-eternity.jpg');
background-repeat: no-repeat;
height: 800px;
width: 1000px;
background-size:100% auto;
}
}
/*Hide in Other Small Devices */
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.bgimg {
background-image: none;
}
}
/* Portrait tablets and small desktops */
#media (min-width: 768px) and (max-width: 991px) {
.bgimg {
background-image: none;
}
}
/* Landscape phones and portrait tablets */
#media (max-width: 767px) {
.bgimg {
background-image: none;
}
}
/* Portrait phones and smaller */
#media (max-width: 480px) {
.bgimg {
background-image: none;
}
}
Hope helps someone.
The code below is adapted from a great blog post by Tim Kadlec that walks through the various scenarios for conditionally displaying a background image.
For your scenario, the mobile version is set to match the width of its parent element. Depending on your layout, you may need to set/restrict the size of the element that #container is in.
If you elect to hide the background image on mobile, then the first style block would go inside the first media query and the second one could be eliminated. As popnoodles mentioned, posting some code would make it easier to provide a more specific solution.
<div id="container"></div>
#container {
background-image: url('images/bg.png');
}
#media all and (min-width: 601px) {
#container {
width:200px;
height:75px;
}
}
#media all and (max-width: 600px) {
#container {
max-width: 100%;
background-size: 100%;
}
}
You can use media query to specify different css rules for desktop version of site and mobile site .
Refere How to use CSS media query to scale background-image to viewing window
Using media queries depends on resolution of the screen we can set the styling .
Refere https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries for more information about media query .
You can also refer
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ for creating mobile version of your website .
I am trying to hide titles in the mobile version of my blog (on blogger). I am trying this code in Advanced CSS but it is not working.
.mobile-index-title.entry-title { display: none; }
Similarly if you do that for regular blog posts it work as suggested here
You have to go to template, under mobile click the setting button (wheel like), then select custom and save.
Then when you add the following line your title won't appear on the mobile site anymore:
.mobile-index-title.entry-title { display: none; }
If you don't select custom, blogger won't parse your Advanced CSS section when showing in mobile mode.
You have to put it inside a #media query. Something like
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
.mobile-index-title.entry-title { display: none; }
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.mobile-index-title.entry-title { display: none; }
}
/* Landscape phones and down */
#media (max-width: 480px) {
.mobile-index-title.entry-title { display: none; }
}