This my code: codesandbox.io
CSS
#media (width > 736px) {
#LogoMonni-mobile {
display: none;
}
}
#media (max-width <= 736px) {
#LogoMonni-pc {
display: none;
}
#LogoMonni-mobile {
display: block;
}
}
JSX
import { ReactComponent as LogoMonniPC } from "./logoMonniPC.svg";
import { ReactComponent as LogoMonniMobile } from "./LogoMonniMobile.svg";
import "./styles.css";
export default function App() {
return (
<div className={"LogoMonni"}>
<LogoMonniPC />
<LogoMonniMobile />
</div>
);
}
When the screen size is > 736px I show the computer version of the SVG, and when <= 736px I show the mobile version, but for some reason <LogoMonniMobile /> does not appear on the screen. What is the reason and how can this be fixed?
You cant use logical operators like <.
#media screen and (min-width: 737px) {
#LogoMonni-mobile {
display: none;
}
}
#media screen and (max-width: 736px) {
#LogoMonni-pc {
display: none;
}
#LogoMonni-mobile {
display: block;
}
}
As i understand the id problem LogoMonni_0 LogoMonni_1 LogoMonni_2 ... if id sv1 are the same as scg2 I don’t know for some reason the browser thinks they should disappear
Related
Can find plenty of info on how to hide mailchimp on a mobile but looking to do the opposite. Have tried adding the code below to the css but doesn't work.
#media (min-width: 500px) {
#modalContent {
display: none !important;
visibility: hidden !important;
}
}
Suspect I'm using the wrong class?
OK think I've sussed this out, unless anyone want to correct me? The class is as below
#media( min-width: 500px ) { #PopupSignupForm_0 { display: none !important; visibility: hidden !important; } }
Am I right?!
Hello you can try JavaScript for it you will able to detect Mobile, tablet and desktop devices separately.
function detectMob() {
const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
];
return toMatch.some((toMatchItem) => {
return navigator.userAgent.match(toMatchItem);
});
}
function detectTab()
{
var userAgent = navigator.userAgent.toLowerCase();
return isTablet = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(userAgent);
}
if(detectTab() == true)
{
console.log('tab');
}
else if(detectMob() == true)
{
console.log('mob');
}
else
{
console.log('desktop');
}
I have an Angular 9 app and when I use this snippet SCSS it returns this error:
SassError: Invalid parent selector "*"
╷
52 │ &#{$value} {
│ ^^^^^^^^^^^^^^^
╵
This is the snippet:
$values: (
"":"",
one: one,
two: two,
);
#mixin gen() {
#each $value, $key in $values {
#media (min-width: 300px) {
&#{$value} {
#content
}
}
}
}
#mixin display {
display: block;
}
.display > * {
#include gen() {
#include display();
}
}
I want in output classes for each value like: display > *, display-one > *, display-two > *and so on.
1. You want to select * after the value >, means you should add it in the mixin
2. You want select -#{$value} and not just &#{$value}. So A- you have to add the -, and B- for $value="" the - is not exist. so probably you should give it special attention.
Shortly, change the scss to
$values: (
one: one,
two: two,
);
#mixin gen() {
#media (min-width: 300px) {
> * {
#content
}
}
#each $value, $key in $values {
#media (min-width: 300px) {
&-#{$value} > * {
#content
}
}
}
}
#mixin display {
display: block;
}
.display {
#include gen() {
#include display();
}
}
Output:
#media (min-width: 300px) {
.display > * {
display: block;
}
}
#media (min-width: 300px) {
.display-one > * {
display: block;
}
}
#media (min-width: 300px) {
.display-two > * {
display: block;
}
}
What #Yosef describes is correct – however, there are a few things to consider
When using #each loops on maps the order is $key, $value.
To minimize the CSS output move the #each loop inside the media query – like:
#media (min-width: 300px) {
// move loop here
#each $key, $value in $values {
...
}
}
// CSS output without redundant media queries
#media (min-width: 300px) {
.display > * {
display: block;
}
.display-one > * {
display: block;
}
.display-two > * {
display: block;
}
}
Last but not least consider not doing this at all – use an attribute selector instead – this way you can handle everything in one selector :-)
#media (min-width: 300px) {
[class|=display] > * { display: block; }
}
// This will match
.display > *, .display-one > *, .display-two > *, .display-xxx > * etc.
I have some JS functionality that changes the css class on my body element. Based on a click, i will change the css class of my body element to one of the following: .font-default, .font-medium, and .font-large.
I have the following mixins that determines the font size of an element based on the body element's class. That looks like this:
#function rem-calc($size) {
$remSize: $size / 16;
#return #{$remSize}rem;
}
#mixin font-size($size) {
#if $size >= 20 {
font-size: rem-calc($size);
} #else if $size == 18 {
font-size: rem-calc(18);
.font-large & {
font-size: rem-calc(20);
}
} #else {
font-size: rem-calc($size);
.font-medium & {
font-size: rem-calc($size + 2);
}
.font-large & {
font-size: rem-calc($size + 4);
}
}
}
An example of me using this mixin is as follows:
.content {
#include font-size(16);
#media (min-width: 1024px) {
#include font-size(30);
}
}
Here's is the corresponding html and css on the linked codepen at the bottom:
<body class="body">
<div class="content">Content</div>
<button class="button">
click to add
</button>
</body>
<script>
const button = document.querySelector('.button')
button.addEventListener('click', () => {
console.log(document.querySelector('.body'))
document.querySelector('.body').classList.add('font-medium');
})
</script>
According to my ruleset (the mixin), in the desktop version, font-size should remain unchanged since size >= 20. However in practice, when I click the button that changes the class to medium, it uses the "mobile" version of the style and overwrites the style that's placed in the media query.
Is there anyway regarding specificity such that I can still use this mixin so that the mobile styles don't bleed into the styles nested in the media queries?
If not, what might be a different solution to this problem?
Here's a pen that shows the issue. When clicking the button, I want the font to remain unchanged. https://codepen.io/rv-akim/pen/WVJpWj
You can clearly see that .font-medium .content is overriding .content due to the fact the former is more specific even though .content is inside of a media query.
Update your code so your normal state of the font size uses a class
#mixin font-size($size) {
#if $size >= 20 {
.normal & {
font-size: rem-calc($size);
}
} #else if $size == 18 {
.normal & {
font-size: rem-calc(18);
}
.font-large & {
font-size: rem-calc(20);
}
} #else {
.normal & {
font-size: rem-calc($size);
}
.font-medium & {
font-size: rem-calc($size + 2);
}
.font-large & {
font-size: rem-calc($size + 4);
}
}
}
.content {
#include font-size(16);
#media (min-width: 1024px) {
#include font-size(30);
}
}
Add class normal to your body tag
<body class="body normal">
Basically, where you only declared the font size rule, I wrapped it with .normal & {}
If you learn to use the Inspector, it will save you tons of headaches later
I have a couple of SVG that get rendered like this
export const MenuHeaderTab = (props: RenderableProps<Props>) =>
{
const css = props.isActive ? "menu-tab menu-tab-selected" : "menu-tab";
return (
<div onClick={() => props.onClick()} className={css}>
{props.children}
</div>
)
}
the problem i have is that in desktop mode it works fine cause they render in the order that i want them to. the problem is that in mobile portrait mode i want one of the rendered SVG to be first in the order (row). So i thought i use row and just set the className on the SVG
so here is the sass/css
#media all and (orientation: portrait)
{
.menu-tab {
width: 10%;
height: 20%;
margin-left: 4vw;
}
.menu-close-button {
order: -1;
}
.menu-leaderboard-button {
order: 2;
}
.menu-prize-button {
order: 3;
}
.menu-rules-button {
order: 4;
}
so i even provided order to all the SVG and -1 to the one that should be first, but they all stay in the exact same order still. Anyone have any clue why this happens.
Order attribute only works if the father element use display: flex
Assuming the .menu-tab is the father's div of this elements .menu-close-button, .menu-leaderboard-button, .menu-prize-button, .menu-rules-button, you just need to set a display: flex to the .menu-tab
Bellow follow an example of the code:
Look athe the close button, its the last element but how its set -1 as order, it become the first element
.menu-tab {
width: 10%;
height: 20%;
margin-left: 4vw;
display: flex;
}
.menu-tab a{
margin-right: 10px;
}
.menu-close-button {
order: -1;
}
.menu-leaderboard-button {
order: 2;
}
.menu-prize-button {
order: 3;
}
.menu-rules-button {
order: 4;
}
<div class="menu-tab">
leaderboard
Prize
Rules
Close
</div>
I'm using FlexSlider to display multiple 170px wide logos in a responsive design. Currently the slider fills 100% of the fluid width of the containing div, which is contained in the overall page wrapper, but this frequently leads to half cut off pictures. I'd like instead for the slider to resize in fixed widths, so that the logos are displayed without being cut off- desktop size would show 5 logos, tablet 4, etc. However, the media queries do not seem to be affecting it all, so all I'm left with is the original width (850px) that quickly becomes too big for the screen size. Is there something I'm missing? Is it possible to mix fluid CSS with a fixed width item like this?
Slider structure:
<div class="contentwrap">
[Omitted rest of the page content]
<div class="sliderwrap">
<div class="flexslider carousel">
<ul class="slides">
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
</div>
CSS:
.contentwrap {
width: 85.5%;
margin: 0 auto;}
.sliderwrap {
width: 850px;
margin: 0 auto;}
#media screen and (max-width: 659px) {
.contentwrap {
width: 100%;
}
#media screen and (max-width: 169px) {
.sliderwrap {
display: none;
}
#media screen and (min-width: 170px) and (max-width: 339px) {
.sliderwrap {
width: 170px;
}
#media screen and (min-width: 340px) and (max-width: 509px) {
.sliderwrap {
width: 340px;
}
#media screen and (min-width: 510px) and (max-width: 794px) {
.sliderwrap {
width: 510px;
}
#media screen and (min-width: 795px) and (max-width: 995px) {
.sliderwrap {
width: 680px;
}
#media screen and (min-width: 170px) {
.sliderwrap {
width: 850px;
}
You must use Carousel With Min & Max Ranges
Example - http://jsfiddle.net/Luu3c2wk/
Code:
jQuery(document).ready(function($) {
// store the slider in a local variable
var $window = $(window),
flexslider;
// tiny helper function to add breakpoints
function getGridSize() {
return (window.innerWidth < 340) ? 1 :
(window.innerWidth < 510) ? 2 :
(window.innerWidth < 800) ? 3 :
(window.innerWidth < 995) ? 4 : 5;
}
$('.flexslider').flexslider({
selector: ".slides > div.flex-col",
animation: "slide",
animationLoop: false,
itemWidth: 100,
itemMargin: 0,
minItems: getGridSize(), // use function to pull in initial value
maxItems: getGridSize(), // use function to pull in initial value
start: function(slider){
flexslider = slider;
}
});
// check grid size on resize event
$window.on('resize', function() {
var gridSize = getGridSize();
console.log(gridSize);
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
});
});