I want to use the full width on xs and sm devices (container-fluid) but just the container class for all other devices
What's the best way to put this in place?
I've tried jasnys bootstrap which has a container-smooth class but it doesn't centre the content when the screen gets over a certain size...
Overwrite the container class in your CSS and your done:
/* XS styling */
#media (max-width: #screen-xs-max) {
.container {
width: inherit;
}
}
/* SM styling */
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) {
.container {
width: inherit;
}
}
Just replace the Less variables with your corresponding px-values.
Or you can do sth like this, and it works too:
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) {
.container {
min-width: 100%;
}
}
For bootstrap 4.4 & onwards
You can specify different container classes based on the device resolution. please have a look at the below example.
<div class="container-sm">
/* Do your stuff here */
</div>
For more customization
Reference: https://getbootstrap.com/docs/4.4/layout/overview/#containers
you can add a copy of the same container and configure it visible only in the sizes you want with the classes hidden-xx and visible-xx like this:
<div class="container-fluid hidden-md hidden-lg">
your content here
</div>
and this for the normal container:
<div class="container hidden-xs hidden-sm">
your content here
</div>
Related
I use a div like this..
<div id="book" class="justify-content-center text-center">
This is fine for desktops, but when on mobile device I need to align text to the left instead. What do I need to add in my media query so that text is left aligned instead when on mobile device?
#media only screen and (max-width: 480px) {
// What do I add here to "override" the text-center so that it align to left instead?
}
Solution:
Do not overwrite the bootstrap classes justify-content-center text-center. Overwrite the unique ID book only.
#media only screen and (max-width: 480px) {
#book{
float:left;
}
}
<div id="book" class="justify-content-center text-center">
Test Text
</div>
See this :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
#media (max-width: 575.98px) {
.text-center {
text-align: left !important
}
}
#media (min-width: 576px) and (max-width: 767.98px) {
.text-center {
text-align: left !important
}
}
#media (min-width: 768px) and (max-width: 991.98px) {
.text-center {
text-align: left !important
}
}
</style>
<div id="book" class="justify-content-center text-center">test</div>
This code generates the output you expect.
You should note that these CSSs are placed after the bootstrap tag.
result for big screen :
result for small screen :
If you're using Bootstrap SASS, combining 2 Bootstrap classes to make a new class that does your job might be a better option. Consider the following:
.text-sm-left-md-right { // Give whatever name you want
#extend .text-start; // or text-left if B4
#extend .text-md-end; // or text-right if B4.
}
The above will have a text aligned left in small screens and then right from medium and above. This way you don't have to put the ID of an element here, and can reuse the class however many times you want.
Just add the css right away
#media only screen and (max-width: 480px) {
.text-center {
text-align: left !important;
}
}
But you must import the CSS AFTER the bootstrap, or the bootstrap will override your CSS, instead of you override it. But there are other solution
write
class="text-left text-sm-center"
this mean on sm screen width, center the CSS, and left below sm
https://getbootstrap.com/docs/4.0/utilities/text/
my website use bootstrap 4 and a css file i made.
in the bottom of this css file, i put some media queries:
#media (max-width: 575px) {
.address .contact {
text-align: center;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { }
#media screen and (min-width:768px) and (max-width:992px){
.left{
margin-left: 0;
width: 100%;
}
.picto{
width: 40%;
}
}
And here is a part of code:
<section id="section_address" class="container">
<div class="row">
<div class="col-12 col-sm-6">
<div class="address">
<h5>ADDRESS</h5>
1 street,<br>
75000, PARIS
</div>
</div>
<div class="col-12 col-sm-6">
<div class="contact">
<h5>MYCOMPANY</h5>
01 11 22 33 44<br>
contact#mycompany.com<br>
http://mycompany.com
</div>
</div>
</div>
</section>
But my media queries are not working, except when i add !important to each line. But i can't do that for each line and i already use media queries and i never had to do that.
Bootstrap css file should be referenced before your custom css file in your html page. If not bootstrap css will Cascade or overwrite your rules.
Make sure your custom CSS added after all other CSS. Because your custom CSS should be added after all other CSS files. whereby your custom CSS will override other CSS.
Because CSS applies "top to bottom".
Thank you!!!
Most likely, the elements to which you applied your own CSS classes also have Bootstrap classes applied to them (like .row, column, col-12 and many others), and the Bootstrap CSS rules (especially those which combine several classes) have a higher specifity, which overrules your own classes.
To get the result you want, use the browser tools / inspector on those elements and look which CSS class / CSS rule / selector is applied. Then create a rule which uses the same selector (combination of classes) PLUS your own class, which will result in a higher specifity and therefore overrule the original Bootstrap rule.
Firstly, avoid using !important unless you absolutely have to, it's a maintenance hazard.
Instead, look at how you could make your rules more specific than the bootstrap ones. Inspect the DOM and look at the problematic rules, then update your selectors with reference to the specificity rules so that they take precedence.
Regarding your newly-added code:
#media (max-width: 575px) {
.address .contact {
text-align: center;
}
}
This selects for all .contact class elements as descendants of `.address' elements. This hierarchy isn't present in the pasted code.
If you want to select them both then you need a comma:
#media (max-width: 575px) {
.address, .contact {
text-align: center;
}
}
If that isn't specific enough then this almost certainly will be:
#media (max-width: 575px) {
#section_address .address, #section_address .contact {
text-align: center;
}
}
Other than that, I can't see .left or .picto anywhere.
I have some onMouseOver functions that don't work particularly well on mobile devices. Would it be possible for me to have a different DIV displayed on mobile devices?
Here's a late response to your suggestions. Basically, I want a separate DIV (without the onMouseOver) if the display is mobile.
<!-- services -->
<section class="services" id="services">
<div class="container ptb">
<div class="row">
<h2 class="centered mb"><b>SERVICES</b></h2>
</div> <!-- Services Headline -->
<img src="assets/img/services-flip.png" height="50%" width="50%"
onMouseOver="this.src='assets/img/services-list.png'"
onMouseOut="this.src='assets/img/services-flip.png'" />
</div> <!-- Content, Image -->
</section>
<!-- end services -->
Media queries are your friend.
Example:
#media screen and (max-width: 768px) {
div.mobile { display: block; }
div.desktop { display: none; }
}
Aside from Media Queries, you can also use something like: http://detectmobilebrowsers.com/
Essentially you can include a script like this, and do something like this:
$(document).ready(function(){
if(jQuery.browser.mobile) {
$('body').addClass('mobile');
}
});
And based on the body class "mobile", hide / display the necessary divs. (this is the jQuery example, but you can do it using plain JS as well)
Sure you can .
Use css's CSS Media Queries
Here is a great reference for apple products screen sizes.
http://stephen.io/mediaqueries/#iPhone
div{
width: 100%;
height:100%;
padding: 0;
margin:0;
left:0;
left:0;
}
#desktopView{
background:rgb(50,50,80);
display:block;
}
#mobileView{
background:rgb(50,80,50);
display:none;
}
#mobileLandscapeView{
display:none;
background:rgb(80,50,50);
}
/* iPhone 6 in portrait & landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px){
/* where you can hide unwanted DIV and show a special MOBILE DIV if desired */
#desktopView{
background:rgb(50,50,80);
display:none;
}
#mobileView{
background:rgb(50,80,50);
display:block;
}
#mobileLandscapeView{
background:rgb(80,50,50);
display:none;
}
}
/* iPhone 6 in landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
/* where you can hide unwanted DIV and show a special MOBILE DIV if desired */
#desktopView{
display:none;
}
#mobileView{
display:none;
}
#mobileLandscapeView{
display:block;
}
}
<div id="desktopView">Should see in desktop mode</div>
<div id="mobileView">Should see in iPhone 6 vertical mode</div>
<div id="mobileLandscapeView">Should see in iPhone 6 landscape mode</div>
I have a css code like this:
#charset "utf-8";
/* long code just an example of top */
.show_hide_top a.showLink { /* small red link */
left: 39% !important;
padding-left: 8px;
top: 15% ;
}
#media only screen and (min-width: 1300px) and (max-width:1500px) {
/* long code for these devices ex: */
.show_hide_top a.showLink {
left: 39% !important;
padding-left: 8px;
top: 18% ;
}
}
#media only screen and (min-width: 769px) and (max-width:1299px) {
code for these devices
}
#media only screen and (min-width:481px) and (max-width: 768px) {
code for these devices
}
However, my computer (1600) picks up the media code for the 1300-1500.
Something (probably silly) is wrong.
Thank you so much for your opinion.
Media queries like this don't target devices, they target the width of the browser viewport in pixels. #media only screen and (min-width: 1300px) and (max-width:1500px) was being picked up because your browser's viewport was in between 1300 pixels wide and 1500 pixels wide.
To demonstrate this idea better, try resizing your browser window and watch the different media queries being applied and removed.
When I was using media query, firefox was not recognizing a generic id like #upper.
Example:
<div id="container">
<div id='left"> content here </div>
<div id="center">
<div id="upper"> content here </div>
...
</div>
<div id="right">content here </div>
</div>
As soon as target #center #upper in the CSS, the media query worked ONLY for the target media and not as a generic rule.
Only #upper? Nope... It was reading and applying the media query for all devices, overwriting the generic CSS.
At first, toggling between min-devide-width and min-width seemed to work, but the problem persisted. So this is the permanent fix.
Make sure to use both full path in the generic CSS and in the media query.
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) { ... }