I can't figure out what I'm doing wrong here... I have two images in "sliderbox" and I need one of them to disappear on mobile and smaller devices. I'm trying to create a new class and then hiding that class, but nothing is happening. Thanks in advance!
Source:
<section class="sliderbox" id="menu-homepage">
<img src="img/arrow.png" class="arrow" alt="image" width="300" height="85" align="right">
Media Query:
#media handheld, only screen and (max-width: 980px) {
.theme-default .nivo-caption{
font-size: 21px;
}
.theme-default .nivoSlider{
height: inherit;
}
.sliderbox-class-arrow {
display: none;
}
Live # gradepowerbrandon.com/test
That's because you are doing it incorrectly.
This is how it should be:
.sliderbox img.arrow {
display: none;
You must not write the word 'class'. Just the name.
I checked your test page. It comes to me that you probably just forgot to add '.sliderbox-class-arrow' class to your image? I tried to add it, and it works fine for me.
Related
I have a mockup the designer gave me, and I have to mimic it using HTML and CSS. There's an title that must look like this in desktop:
Grow your
business
faster
, and in mobile, it must look like:
Grow your business
faster
I haven't been able to figure out the way to do this.
Can you give me a clue?
Thanks.
I have tried with word-break, but haven't been successful yet.
You can use a <br> tag in a <span> for which you set up a CSS rule and a media query showing/hiding it:
.a {
display: none;
}
#media screen and (min-width: 480px) {
.a {
display: inline;
}
}
<h1>Grow your <span class="a"><br></span>business<br>faster</h1>
Try This
<style>
#media screen and (max-width: 467px){
.newline{
display:block;
}
}
</style>
<p>Grow your <span class="newline">business</span></p>
The word-break property specifies how words should break when reaching the end of a line.
You could use a combination of HTML and CSS
#media screen and (max-width: 768px) {
#title span {
display: block;
}
}
<div id="title">
Grow your <span>business</span>
</div>
I'm having some trouble using a media query. It's quite a basic thing but for some reason is not working.
Basically, I have a border around a div tag:
<div class="container games mobile">
<div class="row">
<div class="col-lg-8 div border">
<!-- This div tags are closed at the end of the file -->
I'm using bootstrap and don't honestly know if that can be part of the problem but what I wanted to do was to remove that border whenever the user was in a mobile, and to do so, I added the following lines in my css file:
#media screen and (max-width: 600px) {
.border {
border: none;
}
}
Border on computer
Border on mobile even though I used the querie
(added a grey square on both prints because the content doesn't really need to be in here but a live preview can be found here)
Could the issue be parent>child related?
Thanks in advance!
It's not working because it's being overwritten by bootstrap code. Try this:
#media (max-width: 600px) {
.border {
border: none !important;
}
}
Use css specificity here instead using !important. why not !important?
#media screen and (max-width: 600px){
.games.mobile .border {
border: none;
}
}
I have this html tag to put an arbitrary image on a page.
<img src="https://example.com/wp-content/uploads/....186.png" width="133" height="13" style="float:right; margin-right: 100px; margin-top: 40px;" />
However, I dont want this image on mobile. Can this be done?
It is better to be mobile first.
select class for your image. for example hide-mobile. then write these codes:
.hide-mobile
{
display: none;
}
#media only screen and (min-width: 500px) {
.hide-mobile
{
display: block;
}
}
You should take a look at media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
To hide the image, you would need a media query with display:none, which is only included on a low resolution.
#media only screen and (max-width: 500px) {
img {
display: none;
}
}
EDIT: It is not a good idea to define your style inline. You should rather use a seperate css file or at least a <style> block in your header. This helps with controlling different scenarios and keep your styling consistent over multiple objects and pages.
I'm trying to build a responsive HTML email. I'm attempting to do something fairly simple but getting stuck and am starting to be convinced that I may need to approach it in a different way.
I want to show certain content if the user is on a mobile device, and hide it otherwise.
My first attempt looked like:
The CSS in the head:
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
}
}
The HTML:
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
This works beautifully for most mail clients but not with Gmail which does not support 'display:none' without an '!important'. But, adding the !important to the inline styles means that it will not display for mobile.
I've tried a few different things including messing with visibility/opacity (figured that would be a start in the right direction, but that didn't work at all) and trying to sneak around inline styles by attempting:
The CSS in the head:
.mobile {
display: none !important;
}
#media (max-width: 420px) and (min-width: 100px) {
#fix .mobile {
display:block !important;
}
}
The HTML:
<div id='fix'>
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
</div>
But that didn't work either. Seems like it would be a pretty common problem.
Any ideas how to get around this?
Ah the beauty of software development: we get to just keep trying until things work! Found a fix. It seems like there is more than one way to get around Gmail's display: none (!important on the inline style is not the only way). Here's what worked for me:
The CSS in the head:
.mobile {
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0;
}
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
line-height: 1.5 !important;
max-height: none !important;
}
}
The HTML:
<div class='mobile' style='display:none;font-size: 0; max-height: 0; line-height: 0; padding: 0;'>
I'm only visible on mobile :)
</div>
How about using:
<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>
I want to hide my menu icon on smartphone screens but the media query isn't working. Can anyone shed some insight?
I tried looking at some other answers on here but nothing really helped as I am checking it by re-sizing my browser but I'm using max-width so it should still show.
I have three different logos. One for desktop, one for tablet, and one for mobile. Right now I'm trying to hide my desktop logo for mobile and it's not working so I thought I would try to find out why before trying to hide/reveal any more images.
UPDATE: SOLVED. I'm not sure why it works but after constant refreshing and 30 minutes later it works.
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
#menu-logo {
display: none;
}
}
<div id="header" class="header">
<img id="menu-logo" src="../images/logo.svg"/>
<img id="menu-logo-semi" src="../logo-semi.svg"/>
<img id="menu-logo-small" src="../logo-short.svg"/>
</div
There's no need to have 3 links.
A better way to do this is as follows:
<div id="header" class="header">
<a class="logo" href="/index.html">My cool name</a>
</div>
<style>
<!-- Desktop -->
.logo {
display: block;
text-indent: -9999px;
width: 200px;
height: 82px;
background: url(logo.svg);
background-size: 100px 82px;
}
<!-- Tablet -->
#media all and (max-width: 64em) and (min-width: 48em) {
.logo {
width: 80px;
height: 60px;
background-size: 80px 60px;
}
}
<!-- Mobile -->
#media all and (max-width: 48em) {
.logo {
width: 50px;
height: 30px;
background-size: 50px 30px;
}
}
</style>
Cleaner code.. Just change your logo sizes as you need.
EDIT
I don't know if your logo changes visually on each screen resolution interval. If so, just state another "background: url ..." rule on each media query, before the "background-size". If not, it will be ok since it's a vector, as long as the proportions are correct.
The cause is most likely due to CSS specficity, and the order of things in your stylesheet(s). We need to see all of the CSS affecting the #menu-logo item, and the img generally, especially the default (ie non-media query) CSS, and any other media queries that affect this menu-logo item.
And we also need to know whether such CSS comes before or after the media query - the order of things is very important. (NB: I know really this would be better as a comment rather than a full answer, but I don't have enough rep for that yet!)
So look at the specificity, and the order, then if still flummoxed give us more of the CSS (or the whole stylesheet if it isn't too long).