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; }
}
Related
I have a question about a project with WordPress and the Avada theme. There is a boxed mode option with a dropshadow customization. But when we use the website on mobile, it's not friendly. I would like to disable it!
I think I have to use media queries with CSS properties, but I don't know how...
You can find the project with this link: https://lr-architectes.com
I have already tried something like that in WordPress CSS customizer
#media (max-width: 800px) {
.body .html {
width: 100% !important;
}
}
#media (max-width: 800px) {
.layout-boxed-mode {
display: none !important;
}
}
No results
It looks like there's an error in your CSS syntax. You're missing some vital keywords in your code:
// the keywords `screen` and `and` were missing
#media screen and (max-width: 800px) {
.body .html {
width: 100% !important;
}
}
#media screen and (max-width: 800px) {
.layout-boxed-mode {
display: none !important;
}
}
To learn more about CSS media queries refer to W3Schools's docs on it here
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;
}
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;
}
}
I am working with a Squarespace template and would like to fix up a few things while viewing my website on a mobile device (iPhone). www.jobspark.ca is my website.
Here is the code I tried and didnt have any luck with.
/* ----------Add your custom styles here for Mobile---------- */
#media only screen and (max-width: 640px) {
.desc-wrapper { font-size:24px;
}
}
I have attached an image to help demonstrate what I am trying to fix. Thanks
The font size is set with .desc-wrapper p so would need to change the size with:
#media only screen and (max-width: 640px) {
.desc-wrapper p {
font-size: 24px;
}
/* Changes bottom headline */
.sqs-block-content h1 {
fonts-size: 18px;
}
}
I Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}