just using min-width I would like to hide challange-target element below 408px and show the challange-target up to 408px.
I tried this code but it does not work:
#media only screen and (min-width: 408px) {
.challange-target {
display: block;
}
}
Any ideas?
Here is the jsfiddle link
You mean you want to hide .challenge-target when screen width < 408, and show it at 408px when screen width is >= 408px?
smallest first; hide that elem
.challange-target {
display: none;
}
#media only screen and (min-width: 408px) {
.challange-target {
display: block;
width:408px;
}
}
Related
<td class>
<div class="browser indicator">
<div class="mobile indicator">
In this code, the class indicator has a display:inline-block. How do I increase the specificity weight of the class browser and mobile so I can give them a separate value for display?
You can do that by specifying both classes "chained", meaning browser when it has indicator as well use this style.
.browser.indicator {
}
.mobile.indicator {
}
The important part for you is to not have the space between the classes because doing this will style children with the class indicator
.browser .indicator {
}
.mobile .indicator {
}
U can use this one:
.indicator {
display:inline-block;
width: 100%;
}
#media only screen and (max-width: 600px) {
.indicator {
display: block;
}
}
if screen size will be less 600px all styles which u have at #media will provide for page.
I have a logo, I want to remove the text of the logo, if the size width is 660 pixels.
Well when I strip out the text with CSS
#media (width <= 660px) {
.LogoMonni-text {
display: none;
}
}
svg size remains the same. I want to change the value of the viewBox When removing the text from the logo.is it possible ?
codesandbox.io
You should use media query like that:
#media (max-width: 660px) {
.LogoMonni-text {
display: none;
}
}
you can't use width >= 660px (use min and max)
#media (max-width:660px) {
.LogoMonni-text {
display: none;
}
}
I would like help with code that will show a different slideshow section on Shopify based on the users screen size. I am using the code below which works great on a mobile device but on my laptop I see both slideshows.
What code do I need to add to hide the mobile slideshow when the screen size is above a certain amount of pixels?
#shopify-section-mobile-slideshow {
display: none !important;
}
#media (max-width: 450px){
#shopify-section-slideshow {
display: none !important;
}
#shopify-section-mobile-slideshow {
display: block !important;
}
}
Question answered by #stenley -
Use inspector elements to ascertain the section ID
For me:
#shopify-section-1586161998623 { display: none; }
#media (max-width: 768px){
#shopify-section-slideshow {
display: none !important;
}
#shopify-section-1586161998623 { display: block; }
}
I have a Joomla Module that I'm trying to keep responsive for different screen sizes but displaying and hiding columns. This works well on full page displays.
#media (max-width: 800px) {
.team_name { display:none; }
.team_abbr { display:inline-block;}
.overall { display: inline-block;}
.divisional { display:inline-block;}
.wide { display:none;}
#btn_row { display:inline-block;}
#div_split { display:none;}
}
#media screen and (min-width: 800px) {
.team_name { display: inline-block; }
.team_abbr { display:none;}
.overall { display: inline-block;}
.divisional { display:inline-block;}
.wide { display:inline-block;}
#btn_row { display:none;}
#div_split ( display:inline-block;)
}
But now my challenge is that I want to have this same page/module used inside another page as a module position (which is only about 200 pixels wide).
Is there a CSS command similar to #media that will get the module width instead of the entire page width that the module is on?
Thanks in advance...
One way to do this is to add a class to your module, then size the elements inside the module relative to their parent (ie the module)
(1) Start by going to the module you want to work on > advanced tab > module class suffix
(2) Add a class and remember to include a space at the start, eg ' my-module-class'
(3) Finally, size your module elements relative to the module, eg
#media (max-width: 800px) {
.team_abbr {
...
width:50%;
}
}
Good luck, I hope this helps!
I'm trying to hide a specific div using a media query which is working fine. However, I need it to show when that div is within another specific div. Is this possible. This is the CSS:
#media (min-width: 665px) {
.mrbcircle-ipad:not(.link-inside.mrbcircle-ipad) {
position:absolute;
display:none;
}
}
so .mrbcircle-ipad should be hidden over 665px unless it's within .link-inside.
Currently this is showing .mrbcircle everywhere so I know it's wrong. How can I fix this?
Thanks
Anthony
#media (min-width: 665px) {
.mrbcircle-ipad {
position:absolute;
display:none;
}
.link-inside .mrbcircle-ipad{
position relative;
display: block;
}
}
Use two rules inside the media query: The first to hide it when the viewport is wider than 665px, the second to make it visible if it's inside a certain parent:
#media (min-width: 666px) {
.mrbcircle-ipad {
position:absolute;
display:none;
}
.link-inside .mrbcircle-ipad{
display: block;
}
}