Im trying to create a responsive design here through media queries - so far it's been going pretty well, although i just hit a wall!
I have a h1 in my header which is pretty long, so when the screen gets small enough, it won't fit in - and ruins the responsive idea.
What i am asking is, is it possible to change the content in my h1 when the gets - lets say 500px wide? (example)
Right now my h1 is "CARSTEN ANDERSEN", and i would like it to change to "CARSTEN" at 500px.
Thanks in advance
<h1>Carsten <span class="hide-when-narrow">Andersen</span></h1>
<style>
#media (max-width: 500px) {
.hide-when-narrow {
display: none;
}
}
</style>
Since this is a question of content, it should be handled in the markup.
You could hide the excess words/letters by using max-width with overflow: hidden (use white-space: nowrap to force one line):
h1 { border:1px solid red; }
#media (max-width: 500px) {
h1 { max-width: 158px; overflow: hidden; white-space: nowrap; }
}
<h1>CARSTEN ANDERSEN</h1>
JSFiddle: https://jsfiddle.net/azizn/cs5ttm7s/
You need to change the content property
h1:before {
content: 'CARSTEN ANDERSEN';
}
#media only screen and (max-width: 500px) {
h1:before {
content: 'CARSTEN';
}
}
<h1>
</h1>
Something like this?
Related
So I am making a website using the mobile first method. now my question is: how can i change the text/images etc (not the font-size)?
so when you open the site on a phone it show a text for example: hello there and when your on a laptop/pc it show a different text like: have a nice day the same goes for images/buttons
I know the #media screen and (min-width) but how do I add this to the html without showing the text when not needed?
I have given two solutions.
#1 Solution: display: none / display: block
This is a fairly simple and common way to display content, depending on the screen size. And as I said above in the comments, you can operate on the display: none / display: block rule by setting two texts in the container.
Also, by turning off the visibility of the text for a mobile device, using the pseudo-class :nth-child():
.container p:nth-child(2) {
display: none;
}
And from to, the media query will turn the rules for each text:
#media (max-width: 767px) {...}
.container p {
font-size: 32px;
color: green;
}
.container p:nth-child(2) {
display: none;
}
#media (max-width: 767px) {
.container p:nth-child(1) {
display: none;
}
.container p:nth-child(2) {
display: block;
}
}
<div class="container">
<p>This is notebook</p>
<p>This is mobile</p>
</div>
#2 Solution: pseudo-class :after
This solution is less code, due to the absence of the need to specify the text in the tags. In this case, the text is passed as the content: '' parameter.
.container p {
font-size: 32px;
color: green;
}
.container p:after {
content: 'This is notebook';
}
#media (max-width: 767px) {
.container p:after {
content: 'This is mobile';
}
}
<div class="container">
<p></p>
</div>
Simply use JavaScript. For example, if you have this for mobile users:
<div class="mobile"><p>Hey, I'm on mobile!</p></div>
And this for PC users:
<div class="computer"><p>Hey, I'm on PC!</p></div>
Then you can do it like this:
<script>
const mobile = document.querySelector(".mobile"),
pc = document.querySelector(".computer"),
media = window.matchMedia("(max-width: 1000px)")
if (media.matches) {
mobile.style.display = "none"
pc.style.display = "block"
} else {
pc.style.display = "none"
mobile.style.display = "block"
}
</script>
You can use #media only screen and (hover: none). It's a media query that detects devices with hover ability. So you can write your original code for mobile first and then add your media query for devices that don't have hover abilities like desktops. It doesn't require to specify a screen width or anything like that since you can't predict every screen size out there. It automatically detects devices with hover or not for every screen size
Exmp:
#media only screen and (hover: none){
.mystyle{
// your style here
color: red
}
}
I think it's a good way without having the need to duplicate your code.
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've got a problem which I have no idea how to get around of.
I use a shop script where I can only edit CSS file.
I have a div with background-image and in there I have a normal image:
<style type="text/css">
.someclassforcss img{
some:attributes;
}
.someclassforcss {
background-image:url(/link.png);
}
</style>
<div class="someclassforcss">
<img src="/link2.png">
</div>
Everything's good, but I want to use media queries (or any other method) to hide background-image of div for mobile devices, but I have no idea how to make it, because media queries doesn't work for specific attributes, only for whole elements, so if I would've hided the div, my img is also hided which i don't want.
You DO can change attribute regarding media dimensions.
Your CSS:
.someclassforcss {
background-image:url(/link.png);
}
#media screen and (max-width: 762px){
.someclassforcss {
background-image: none;
}
}
Try this:
#media only screen and (max-width: 767px){
.someclassforcss {
background: none;
}
}
You can hide the div with a media query. eg:
#media (max-width: 600px) {
.someclassforcss {
display: none;
}
}
or if you just want to remove the background image:
#media (max-width: 600px) {
.someclassforcss {
background-url: none;
}
}
So, I basically want to have 2 different layouts for a page on my website.
For under 400px:
[image]
description
[image]
description
For above 400px:
[image] description
[image] description
(so, the image and the text are on the same line)
I know I can do this very easily with Bootstrap if my breakpoint was one of the predefined ones, but it is not. So, what would the best approach be? Could I still use Bootstrap grid system and 'hack' it somehow or do something else altogether?
Thanks!
Here is a snippet
/*screen width over 400px*/
#media (min-width: 401px){
img {
width:50px;
height:50px;
}
p{
display:inline;
}
}
/*screen upto 400px*/
#media (max-width: 400px){
img {
width:100px;
height:100px;
}
}
<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSSHCRPXAtpOWvSaR4T5ecblzIT-RdIV19VjNB4uUPPnEq_UT5r'>
<p id='p1'>
description
</p>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEaoUONNbTby87bfUNcRrdufGcaLSbDnC3SGSqKLk1ZwNFMEE3'>
<p id='p2'>
description
</p>
Alright your going to have to use media queries. Here are a few examples that I wrote.
A media query is a set of styles(styles that you set)that has a certain screen size condition.
When this screen size condition is met the styles given inside the media query override any other styles that contradict the styles outside the media query.
Here is an example
#media (max-width: 500px) {
#visible {
display: none;
}
}
<p id="visible">Not Hidden</p>
<p>Change screen sizes!</p>
Here is the basic syntax of media queries
First make the #media then add a screen size condition (max-width: 1000px) or (min-width: 500px) heres an example using max-width. Then, add the styles inside the media query.(Dont forget to close the media query!)
#media (max-width: 1000px) {
h1 {
display: none;
}
#hidden {
display: block;
}
}
p {
display: none;
}
<h1 id="heading">Heading</h1>
<p id="hidden">Hidden</p>
Now run the code snippet above and you will see that the heading will appear when the screen size is above 1000px and it disappears and a hidden phrase appears when the screen size is below 1000px.
Here is a tutorial on media queries Media Queries
What you're looking for are css media queries. Check this page for an in-depth explanation http://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
Alternatively, in your case it looks like you simply want to wrap the descriptions on to the next line when the viewport becomes too narrow. If this is the case then there's no need to add in extra markup because you can just leverage the natural behavior of inline-block elements. This link will clarify the behavior of inline-block elements for you http://www.w3schools.com/css/css_inline-block.asp.
I would go this way, using a row structure.
It will give you some more options down the road, when/if you maybe want 3 img/text lined up, or ... and so on, sooner or later maybe a header, maybe a footer.
.header {
padding: 10px;
border-bottom: 1px solid #999;
}
.container {
padding: 10px;
white-space: nowrap;
}
.container .row {
margin-bottom: 10px;
}
.container .row span {
margin-left: 10px;
}
.container .row.at-top span {
vertical-align: top;
}
#media (max-width: 400px){
.container .row span {
display: block;
margin-left: 0;
margin-top: 10px;
}
}
<div class="header">
<div class="row">
Header
</div>
</div>
<div class="container">
<div class="row at-top">
<img src="http://lorempixel.com/200/100/sports" />
<span> Some text ... being aligned at top</span>
</div>
<div class="row">
<img src="http://lorempixel.com/200/100/city" />
<span> Some text ... or at bottom</span>
</div>
</div>
I have a PhoneGap app that displays an unordered list utilizing jQuery mobile's layout. When you view the app on a smaller screen, the text overlaps and you can't read it anymore. I can't figure out how to have the line "break" so that it appears as two lines when the screen size is reduced, and one line when it is not reduced.
Full screen
Reduced screen
On the second line the text disappears, and is "hidden" by the numerical values. The code of that chunk looks like this:
HTML:
<div data-role="content">
<ul data-role="listview" data-divider-theme="a">
<li data-role="list-divider"></li>
<li><b>Revenues</b></li>
<li>Gross Sales<span class="right">$543,600</span></li>
<li>Less Sales Returned and Allowances<span class="right">$9,200</span></li>
<li>Less Sales Discounts<span class="right">$5,100</span></li>
(continues on)
CSS:
span.right {
float: right;
}
Add a class to <br>.
Example:
Say u want to break <br> only at a custom screen size 358px n below.
HTML:
<br class="hidden-ss">
CSS:
#media (min-width: 359px) {
.hidden-ss {
display: none !important;
}
}
In reality u may have multiple #media screen breaking points already defined, e.g when using default Bootstrap:
HTML:
<br class="visible-ss hidden-xs hidden-sm hidden-md hidden-lg">
Define CSS:
#media (max-width: 358px) {
.visible-ss {
display: block !important;
}
Already pre-defined in Bootstrap:
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
#media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
This is a job for a table:
<!doctype html>
<title>Table demo</title>
<style>
td:nth-child(2) { text-align: right }
</style>
<table><caption>Revenues</caption>
<tr><td>Gross Sales <td>$543,600
<tr><td>Less Sales Returned and Allowances <td>$9,200
<tr><td>Less Sales Discounts <td>$5,100
</table>
If you really want the figures placed on the very right, you can add the CSS rule table { width: 100% }, but the presentation is much more readable without it.
so you can use
white-space: normal !important;
I was using white-space: normal; without the !important tag it does not become "wrap text" with JQuery mobile.
For smaller screens please use the CSS below so the span automatically comes in with the next line:
#media only screen and (max-device-width: 480px) {
span.right {
display:block;
text-align:right;
clear:both;
}
}
If you use Bootstrap, you can put a breaking point depending on the screen size.
For example, to break line only on screens smaller than medium, you could put that in your html:
<br class="d-md-none">
More info on https://getbootstrap.com/docs/5.2/utilities/display/#hiding-elements