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;
}
}
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 use CSS grid and Sass, and I use different grid layouts for different screen sizes (phone, tablet, desktop). But for some pages, I would like the same layouts but chosen at slightly bigger or smaller screens than for other pages.
Is something like that possible? Or am I approaching it from the wrong angle? My current solution (see below) works, but duplicates the styles a lot.
In more detail:
I have 3 different grids that are chosen according to the screen size.
.hero {
&__container {
grid-template-areas:
"header"
"image"
"text";
}
#media min-width: 1000px {
grid-template-areas:
"header header header"
"text ... image"
"text ... image";
}
// other definitions for this screen size
}
#media min-width: 1300px {
grid-template-areas:
"header header image"
"text ... image"
"text ... image";
}
// other definitions for this screen size
}
}
&__header {
grid-area: header;
font-size: 2.5rem;
#media min-width: 1000px {
font-size: 2.8rem;
}
#media min-width: 1300px {
font-size: 3.2rem;
}
}
...
}
They are used in about 20 similar web pages.
<div class="page_a">
<div class="hero">
<div class="hero__container">
<div class="hero__header">...</div>
<div class="hero__text">...</div>
<div class="hero__image">...</div>
</div>
</div>
</div>
The layout is very similar, but I would like to switch to different layouts at a different point based on the specifics of the content: the header text length, the size & importance of the image, etc.
What I would like to do is something like this:
.page_a {
.hero {
// redefine nothing, use defaults
}
}
.page_c {
.hero {
// the header is longer so we need a bigger screen to switch to the biggest layout
// somehow say that the 1300px layout should be used from 1500px
}
}
The only thing I managed to do is to simply redefine all the grids at each possible point (the default points + the custom points), which means the code is very repetitive:
.page_c {
.hero {
// use 1000px layout also for 1300px - the whole thing has to be repeated
#media min-width: 1300px {
grid-template-areas:
"header header header"
"text ... image"
"text ... image";
}
// other definitions for this size
}
// use 1300px layout for 1500px - the whole thing has to be repeated
#media min-width: 1500px {
grid-template-areas:
"header header image"
"text ... image"
"text ... image";
}
// other definitions for this size
}
}
}
Which means that every time I change some layout I have to go to all the places it is used at various size and change it too.
Here you go...
Your problem could be solved with SASS or SCSS, more precisely with a #mixin. I'm using SCSS because I'm more familiar with it, but you could also use SASS.
What is a #mixin?
As stated on SASS official website: Mixins allow you to define styles that can be re-used throughout your stylesheet. First you define a #mixin then you call it later in your code with an #include. Every #mixin should have a unique name. For example: define a #mixin layout_600 and call it with an #include layout_600.
Two things are important when defining a #mixin:
A #mixin should be defined before you call it with an #include. Otherwise, SCSS will try to call something that isn't defined yet (it is defined but later in your stylesheet).
A #mixin should be defined outside of your nested code (ideally at the top of your stylesheet). If you define a #mixin inside your nested code, you won't be able to call it later when you want to change default styles. The easiest way for you to understand what I mean is to show you the correct way and the wrong way.
Correct:
#mixin layout_600 {
font-size: 3rem;
color: blue;
font-weight: 700;
}
.hero {
&__header {
#media (min-width: 600px) {
#include layout_600;
}
}
}
.page_b {
.hero {
// Use the 600px layout also for the 1000px.
&__header {
#media (min-width: 1000px) {
// It will work.
#include layout_600;
}
}
}
}
Wrong:
.hero {
&__header {
#media (min-width: 600px) {
#mixin layout_600 {
font-size: 3rem;
color: blue;
font-weight: 700;
}
}
}
}
.page_b {
.hero {
// Use the 600px layout also for the 1000px.
&__header {
#media (min-width: 1000px) {
// It won't work.
#include layout_600;
}
}
}
}
You need to write a #mixin for each layout that you want to have (e.g. 600px, 1000px). You only need to do it once for every layout but you can call a particular #mixin n-times. This is perfect because:
you don't have to re-write your code, you just call a particular #mixin with an #include as many times as you want and
if you want to change your styling, you do it just once in your #mixin and the style will be changed in every place that is referring to this #mixin.
Working example
Before changing the default style
I defined three #mixins like this:
when: window width < 600px,
when: 600px < window width < 1000px and
when: window width > 1000px.
As you can see, the font-size and the color is different at different window width. The font is getting bigger and the color goes from black to blue to red as the window is getting wider. By the way, in the right upper corner I added a div that shows the current window width.
Here's a live demo before changing the default style.
After changing the default style
I decided that for the page_b I would use the 600px layout (i.e. #mixin layout_600) also for the 1000px. This can easily be done by calling the #mixin layout_600 with the #include layout_600 like this:
.page_b {
.hero {
// Use the 600px layout also for the 1000px.
&__header {
#media (min-width: 1000px) {
#include layout_600;
}
}
}
}
As you can see, the style of the page_b when window width is actually 1000px is the same as if the window width is 600px (smaller font and blue color).
Here's a live demo after changing the default style.
Customizing a #mixin
Also, it's possible to customize a #mixin if you want. For example, I used the 600px layout (i.e. #mixin layout_600) but changed the color from red to green. This can be done like this:
.page_b {
.hero {
// Use the 600px layout also for the 1000px.
&__header {
#media (min-width: 1000px) {
#include layout_600;
color: green; // Customize the mixin.
}
}
}
}
As you can see, the color should be blue (as in #mixin layout_600) but it's green.
Here's a live demo after customizing a #mixin.
My website is designed on a larger monitor and has a screen width of 2560px (Samsung 32"). Therefore it must be scaled down to appear properly on any smaller screen; for example, a common laptop with a 17" screen has a pixel width of 1366px. So, by dividing 1366 / 2560 we get the right scale percentage of .53 for use in a CSS transform:scale(calc(1366 / 2560)); formula.
The entire page is wrapped in a div that I have called .omniScale
.omniScale {
display: table;
margin:0 auto;
transform-origin: top left;
transform:scale(calc(1366 / 2560));
}
This works just great, however the 1366 has to change dynamically on page load to the width of the user’s device no matter if it may be a tablet, laptop, mid-size desktop monitor or larger on up to a large television.
Using 100vw instead of the hardwired number does not work. I don't want to use JavaScript, if avoidable, so has to work for those who have js turned off.
Welcome to Stack Overflow :]
Sadly at this moment there is no mechanism to calculate integer ratio of two length values in pure CSS (calc(100vw / 2560px) won't work, because you can divide length only with integer to get other length, not with other length to get integer).
So if you want to get ratio of your reference element to actual viewport, JavaScript seems to be the only option. Reasonable approach would be use JS just to set CSS custom property and let styles do the rest:
function setScaleRatio() {
viewportWidth = document.documentElement.clientWidth;
fullWidth = 2560 + 200;
// (2560 is reference size, +200 just to make sure we'll see right border in this example)
scaleRatio = viewportWidth / fullWidth;
document.documentElement.style.setProperty('--ratio', scaleRatio);
};
setScaleRatio();
window.addEventListener('resize', setScaleRatio);
[style]::before {
content: attr(style);
}
<div style="
width: 2560px;
transform: scale(var(--ratio));
transform-origin: top left;
font-size: 100px;
background-color: black;
color: white;
"></div>
I don't think this is the right approach. to make something responsive to all screens it is best to use percentages and #madia.
for more info: https://blog.froont.com/9-basic-principles-of-responsive-web-design/
example:
.container {
width: 2560px;
}
#media only screen and (max-width: 2560px) {
.container {
width: 1366px;
}
}
#media only screen and (max-width: 1366px) {
.container {
width: 900px;
}
}
#media only screen and (max-width: 900px) {
.container {
width: 500px;
}
}
enter image description hereText inside button is extending outside of the button. Is there anyways I can make the text scale based on the button/screen size? I already tried doing auto and searching youtube and google. Also used media query.
I already tried doing auto and searching youtube and google.
#media(min-width: 400px) {
.purplebutton {
min-width: 350px;
}
.buttontext {
font-size: 16px;
}
}
#media(min-width: 600px) {
.purplebutton {
min-width: 450px;
}
.buttontext {
font-size: 17px;
}
}
#media(min-width: 800px) {
.purplebutton {
min-width: 550px;
}
.buttontext {
font-size: 20px;
}
}
Expected result is the text to fit inside the button and size of font adjust according.
Actual result is the text extends outside the button
Instead of using absolute scaling units (px) for font-size use relative scaling font-size such as em, rem or vw.
Try using word-break property to the button like this
word-break: break-all;
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;
}
}