I'm looking for a way to add a line break if the screen width is smaller than X.
Half of the text should stay on the next line, instead of just one word, on smaller screen width.
Normal view on big screens:
Normal view on smaller screens:
Wanted result on smaller screens:
Thinner text is not related
I'm looking for a way to do it with CSS.
Use #media queries with span element and turn them to display: block; as they are inline by default...
Demo (Resize the fiddle window)
div {
font-size: 30px;
font-family: Arial;
}
#media screen and (max-width: 400px) {
div span:last-of-type {
display: block;
color: #f00;
}
}
#media screen and (max-width: 300px) {
div span:nth-of-type(2) {
display: block;
color: #00f;
}
}
Explanation: Here, I've simply wrapped each word with the span element which is inline by default.. So what I do is, I turn them to display: block; if the screen resolution is less than some px.
You can make these flexible by applying display: block; and display: inline-block; whichever suits your requirements.
If screen size is maximum of 400px
If screen size is maximum of 300px
Changing colors so that you can see the effect.
Add the br in your code, hide it using css initially and make it display: inline in media queries when the width meets your requirement
http://jsfiddle.net/LnECr/1/
br{ display: none; }
#media all and (max-width: 480px) {
.break2 { display: inline }
}
#media all and (max-width: 320px) {
br { display: inline }
}
Many different ways this can be done, I am using br because you asked for br
I wouldn't use a <br /> tag. Use CSS white-space:nowrap instead.
Like this:
<h1>Creative <span class="wrap">Web Design</span></h1>
#media screen and (max-width:480px) {
span.wrap {
white-space:nowrap;
}
}
Related
This question already has answers here:
CSS media queries - Order matters?
(3 answers)
Closed 8 months ago.
So I understand the (min-width: 1400px) and (max-width: 1400px) are break points for when the CSS reaches those breakpoints it supposed to go back to its default sizing.
This is what I have done. I have my main CSS file that has its default sizing and another CSS file called query.css that controls the responsiveness of the web page.
This is how I have certain parts of both files to adjust accordingly
main CSS
.h1,.h2,.h3 {
font-size: 70px;
font-family: Cinzel, sans-serif;
}
.nav-link {
padding-left: 10rem !important;
}
query CSS
#media (min-width: 1400px) {
.h1,.h2,.h3 {
font-size: 1em;
}
.nav-link{
padding-left: 5em !important;
}
}
This is where it confuses me. The main CSS file settings are meant to be the main one, but the query CSS seems to overwrite the main CSS and it really messes up when I try and do responsive design.
I get that this min-width:1400px is meant to say if it goes from 2000px down to 1400px it must keep the min-width:1400px, but then what is the point of having the main CSS if the min-width:1400px just negates the main CSS file settings.
Its very frustrating working like this.
... it must keep the min-width:1400px ...
That's not how min-width works with media queries.
The min-width rule effectively says "apply this block of CSS if the viewport is at least this wide", in this case at least 1400px. if the viewport width is less than 1400px then the CSS surrounded by the media query will not be applied and the styles defined in main.css will take precedence.
#media (min-width: 1400px) {
/* CSS that is only applied if the viewport is >= 1400px */
}
Also, be careful about the order that the CSS files are included in the page. If query.css was included before then the media query it contains would always be over-ruled by the CSS in main.css.
It's a little more complicated than this when you take specificity in to account, but you should get the general idea.
For more info, take a look at the documentation for the media query min-width rule.
An important aspect of media-queries is structuring them correctly - especially if you're using a combination of #media (min-width: x) and #media (max-width: x).
CSS is read from top to bottom - this means that the last property applied to your desired selector will take priority, as long as its valid. This means that a more "precise/accurate" media-query rule prop will not take priority over another, if the media-query is placed below the other and both of their rules are valid. This means you can't just throw in media-queries at random locations in your CSS-file, because the CSS is just going to be overwritten.
Note that this doesn't apply on more specific selectors, but in my personal preference, I don't like mixing the specificity on a selector across multiple media-queries.
Because of this, you should always make media-query-rules with:
A descending pixel value if you're using max-width
An ascending pixel value if you're using min-width
In this example, the min-width-media-queries below the max-width-media-queries
This way, the first media-query will always take priority as long as its rules apply. When the second media-query's rule apply, that will take priority instead and so on. Try dragging the screen size of this code snippet in full page and you'll see how this code structuring works.
div {
width: 150px;
height: 150px;
background-color: red;
}
#media screen and (max-width: 412px) {
div {
background-color: green;
}
}
#media screen and (max-width: 360px) {
div {
background-color: yellow;
}
}
#media screen and (min-width: 320px) {
div {
background-color: orange;
}
}
#media screen and (min-width: 414px) {
div {
background-color: black;
}
}
#media screen and (min-width: 428px) {
div {
background-color: purple;
}
}
#media screen and (min-width: 768px) {
div {
background-color: pink;
}
}
#media screen and (min-width: 800px) {
div {
background-color: gray;
}
}
#media screen and (min-width: 820px) {
div {
background-color: limegreen;
}
}
#media screen and (min-width: 834px) {
div {
background-color: blue;
}
}
#media screen and (min-width: 884px) {
div {
background-color: teal;
}
}
<div></div>
I created a spacing-element that uses two classes:
.spacer-mobile-M = spacing height on mobile devices
.spacer-desktop-0 = spacing height on desktop devices (only active #media (min-width: 992px))
.spacer-blank {
display: block;
border: 1px solid #000;
}
.spacer-mobile-M {
height: 20px;
}
#media (min-width: 992px) {
.spacer-desktop-0 {
height: 0px;
}
}
<div class="spacer-blank spacer-mobile-M spacer-desktop-0" aria-hidden="true"></div>
The expected behavior on a 1200px wide screen would be, that the mobile-spacer is being overwritten by the desktop style (higher specificity due to media query and defined later in the code).
However, right now, the desktop spacer is being overwritten by the mobile style.
I only experience this behavior with a spacer that has a lower height than the mobile value.
Is there a rule, that classes with height: 0 or lower height than the general one (without media query) can be overwritten? I can't find anything in Google when I search for specificity.
Thanks for a short hint.
I think the problem could be use two different CSS classes for the same element. If you use media queries, why don't use the same class? For example:
.spacer {
display: block;
height: 20px;
}
#media (min-width: 992px) {
.spacer {
height: 0;
}
}
<div class="spacer" aria-hidden="true"></div>
I don't know the rest of the code, but if on desktop size you want simply hide the spacer also you can use:
#media (min-width: 992px) {
.spacer {
display: none;
}
}
first thing, I'm a hacker when it comes to CSS. Trying to read and practice as much as possible to get better. Currently, I'm trying to add a set of media queries to a row to control padding, margins, and font sizing from mobile up so my text is positioned exactly where I want it. My question is how do I create a class for a row, so these styles only apply to this row of content. In this case, it's the first(hero) row on my website that has html text over an image. Below is what I'm trying to write, give or take a couple fine tuning adjustments. How do I create a single class to control the styling of the h2 and h3 classes?
#media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!important;
}
}
#media only screen and (max-width: 481px) {
#wrapper .hero h3 {
font-size: 22px!important;
}
}
I appreciate any guidance or support the community can share!
#media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!important;
}
#wrapper .hero h3 {
font-size: 22px!important;
}
}
Else you can use less or SASS preprocessor for control multiple property in single class
From your CSS, it's clear that your want to apply different font size to different child elements in the same viewport. It will not be possible to define two values for same property i.e font-size in this case and expect the browser to use both for different elements. However, you need to define the media query only once:
#media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!important;
}
#wrapper .hero h3 {
font-size: 22px!important;
}
}
This may be a beginner question concerning CSS.
Is it possible to decide what to to print (dispay) using CSS and media queries?
Say for example if my window (or device screen) is smaller than 500 pixels then dispay "Hello!" otherwise dispay "Guten Tag!"
What I have found shows how to decide some display attribute (color or ...), never the contents itself.
You can use a pseudo-element with content:
p::before{ content: 'foo' }
#media (max-width: 500px){
p::before{ content: 'bar' }
}
<p></p>
JSFiddle
You'd need to have two elements, one for screen bigger than 500 and one for less than 500. Then use media queries to show/hide one on them
DEMO: http://jsbin.com/pizosehire/edit?output
HTML
<div class="large">Hello</div>
<div class="small">Guten Tag</div>
CSS
.small {
display: none;
}
#media (max-width: 500px) {
.large {
display: none;
}
.small {
display: block;
}
}
You will need to work with media-queries.
You can change your css to something like this
#media (max-width: 500px){
#mydiv{ background: url('img-sx.img') }
}
#media (min-width: 501px){
#mydiv{ background: url('img-s.img') }
}
I have sass code that generates a negated media query as follow (based on Exact NOT(Inverse) of CSS Media Query):
#media not screen and (max-width: 420px) {
.phone {
display: none;
}
}
#media not screen and (min-width: 421px) and (max-width: 992px) {
.tablet {
display: none;
}
}
Why doesn't this work for the last div with combined classes?
<div class="phone">visible on: phone</div>
<div class="tablet">visible on: tablet</div>
<div class="phone tablet">visible on: phone and tablet</div>
The reason I'm inverting the logic is because if I would do it the other way around (showing instead of hiding). I wouldn't know what display type each element would be (block, inline, etc) and I can't set it back to it's previous value.
Example and source.
<div class="phone tablet"/> cannot be visible any time, because all time at least one of your 2 media queries are matched, so this div gets a display: none from at least one of those.
One solution would be
#media not screen and (max-width: 420px) {
.phone:not(.tablet) {
display: none;
}
}
#media not screen and (min-width: 421px) and (max-width: 992px) {
.tablet:not(.phone) {
display: none;
}
}
Update to your Fiddle.
If you also want the div in question be hidden if both, .phone and .tablet are hidden, add
#media not screen and (max-width: 992px) {
.phone.tablet {
display: none;
}
}
Another update to your Fiddle.