I want to change the order of two divs. The HTML:
<div>container
<div> Navigation backwards </div>
<div> Social buttons </div>
<div> Navigation forwards </div>
</div>
Looks like this on a big screen:
<-- [social] -->
I need to change that for small (mobile) devices to:
<-- -->
[social]
Is this possible with pure css? I could just add some HTML and solve it with display: none, but that's an ugly solution imo.
So #acudars is right... but there's some things to consider here. One thing is that the order of your markup will make it tricky to achieve this... so by adding the social buttons at the bottom you can assure this will be easier to achieve.
I went ahead and made a jsFiddle: Demo
HTML
<div class="navCont">
<div class="arrowPrev">←</div>
<div class="arrowNext">→</div>
<div class="socialButtons">Social Buttons</div>
</div>
CSS
.navCont {
background: #f6f6f6;
border-radius: 5px;
clear: both;
overflow: hidden;
padding: 5px 10px;
}
.arrowPrev {
float: left;
}
.socialButtons {
text-align: center;
}
.arrowNext {
float: right;
}
#media (max-width: 320px) {
.socialButtons {
float: none;
clear: both;
}
}
So lets say that you are targeting mobile devices at 320px width... just go ahead and resize the fiddle to see this in action.
The CSS is very straight forward and I just added a little style to make it clear.
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Related
This question already has answers here:
CSS media queries - Order matters?
(3 answers)
Closed 8 months ago.
I'm building a different view for mobile and desktop, and have problem with the limit of 500px.
When the screen has exactly a 500px width, my screen doesn't show not mobile nor desktop view.
.desktop-view{
background-color: blue;
color : yellow
}
.mobile-view{
background-color: yellow;
color : blue;
}
#media (min-width: 500px) {
section.mobile-view{
display: none;
}
}
#media (max-width: 500px) {
section.desktop-view{
display: none;
}
}
<div>
<section class="desktop-view">
This is the desktop view
</section>
<section class="mobile-view">
This is the mobile view
</section>
</div>
If I change one 500px by 501px, I have both lines. I feel I tried all hacky combination without success.
At exactly 500px, both of your media are triggered so none of your views are shown. You could display:none your desktop view by default and set it as block if the screen is larger than 500px.
/* everything, or mobile only if overridden in media queries */
.mobile-view{
background-color: yellow;
color : blue;
}
section.desktop-view{
display: none;
}
/* desktop */
#media (min-width: 500px) {
section.mobile-view{
display: none;
}
section.desktop-view{
display: block;
background-color: blue;
color : yellow
}
}
<div>
<section class="desktop-view">
This is the desktop view
</section>
<section class="mobile-view">
This is the mobile view
</section>
</div>
I have the following markup, and I need to set two different background images at different breakpoints.
<body>
<main>
<div class="intro" style="background-image: url(https://s3.amazonaws.com/my_mobile_image);"></div>
<section>
....
</section>
<section>
....
</section>
</main>
</body>
I can only set the background image in the style attribute in the HTML markup. How can I render a background image suitable for mobile and a different image that is suitable for desktop?
Should I have two different divs like this setting intro-mobile to display none on a desktop breakpoint and setting intro-desktop to display none on a mobile breakpoint?
<div class="intro intro-mobile" style="background-image: url(https://s3.amazonaws.com/my_mobile_image);"></div>
<div class="intro intro-desktop" style="background-image: url(https://s3.amazonaws.com/my_desktop_image);"></div>
You could use the CSS media queries.
For example (assuming you want to show mobile background on screens < 768px wide).
.intro {
background-image: url(https://s3.amazonaws.com/my_mobile_image);
}
#media screen and (min-width: 768px) {
.intro {
background-image: url(https://s3.amazonaws.com/my_desktop_image);
}
}
Or if you need to have it inside of the style attribute, you could use media queries to hide the other div.
.intro-desktop {
display: none;
}
#media screen and (min-width: 768px) {
.intro-desktop {
display: block;
}
.intro-mobile {
display: none;
}
}
Also, if you can include a <style> inside of the markup, you could just do:
<style>
.intro {
background-image: url(https://s3.amazonaws.com/my_mobile_image);
}
#media screen and (min-width: 768px) {
.intro {
background-image: url(https://s3.amazonaws.com/my_desktop_image);
}
}
</style>
How can I set automatic line breaks on mobile devices? At the moment my code looks like:
HTML
<div class="container-fluid bg-1 text-center">
<h2>MessageOfTheDay</br>
</br></h2>
<p style="margin-bottom: 100px;">SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p>
<h1 style="margin-bottom: 100px;">XXXXXX</br>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>
</div>
CSS
.bg-1{
background-color: black;
background-size: cover;
color: #ffffff;
height: auto;
min-height:620px;
padding:10px;
margin-top:0px;}
body {
font: 20px "Montserrat", sans-serif;
color: #f5f6f7;}
p {font-size: 20px;}
.margin {margin-bottom: 10px;}
h1,h2,h3{
margin-top: 0px;
margin-bottom: 0px;}
.container-fluid{
padding-top: 20px;
padding-bottom: 0px;}
h1{font-size: 50px;}
How can I fix truncate text? I want set automatic brake line on mobile.
Image
It would be a bit of a Janky fix, but this should work... Bootstrap allows us to display/hide information based screen size with built in media query's... so if you wanted to add a break at a specific point in the text, you could do something like the following:
<div class="visible-xs"><br /><br /></div>
or maybe this would even work, Not sure on the following so give it a shot and let us know if it worked for you:
<br class="visible-xs" />
the "visible-xs" class in bootstrap should make the content visible only if the screen size is less than 768px... the alternative is "hidden-xs" which hides content on smaller displays. :) Happy coding!
You can use media queries in CSS to do this. You would give the element that would be the higher up element, a class or id and then set its width to 100% and its display to inline-block or block when the screen is less than a certain size (or greater than a certain size).
With this code every .element will be 100% width then the screen size is 600px or less. if you wanted it to be when the screen is greater than or equal to 600px then you would use min-width: 600px instead.
#media (max-width: 600px) {
.element {
display: inline-block;
width: 100%;
}
}
<div class="container-fluid bg-1 text-center">
<h2>MessageOfTheDay</br>
</br></h2>
<p style="margin-bottom: 100px;" class='workdBreak'>SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p>
<h1 style="margin-bottom: 100px;">XXXXXX</br>
<span class='workdBreak'>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>
</div>
</span>
#media only screen and (max-width : 480px) {
.workdBreak{
word-wrap:break-word;
}
}
Used word-wrap css property to break word if it is larger than width of container.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
http://www.w3schools.com/cssref/css3_pr_word-break.asp
Bootsrap media query
/========== Mobile First Method ==========/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
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.
I have set up a global element to align images to the right:
.containerright {
float: right; margin: 5px 5px 5px 10px; position:relative;
}
It works perfectly until the screen is minimized to mobile portrait size. Then the text wrap leaves a few words behind.
For example:
<div class="containerright"><img src="/images/imageexample.jpg" width="223" height="160" hspace="0" vspace="5" alt="imageexample" border="0"></div>
<h2>Here is an example of heading text!</h2>
When minimised 'Here is an example...' is aligned to the top-left of the image and the rest of the sentence '...of heading text!' falls under the image so there is a huge break where the image is sitting to its right.
How can I set the class so that when it's viewed '#media (max-width: 320px)' it stacks eg. display:block; ???
Thanks for the help!
Just remove the float in the media query CSS. :)
#media (max-width: 320px) {
.containerright {
float: right; /* remove the float on the mobile media query */
margin: 5px 5px 5px 10px;
position:relative;
}
}
jsFiddle example here.. resize the screen to see what it would look like on a mobile < 320px.
Alternatively, you could just override it in the media query..
#media (max-width: 320px) {
.containerright {
float:none;
}
}
#media (max-width: 320px) {
.containerright {
width: 100%;
}
}