I'm working with react Bootstrap. I have designed a layout which I want to refactor on small screens. All I want to do is, at certain breakpoints I want my h3 elements and image resized. I've been using the following:
Code from index.css :
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) {
.thumbnailImg{
width: 30%;
}
h3{
font-size: 1rem;
}
}
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767.98px) {
.thumbnailImg{
width: 35%;
}
h3{
font-size: 1rem;
}
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) {
.thumbnailImg{
width: 40%;
}
h3{
font-size: 1.5rem;
}
}
Now for some reasons none of the breakpoints have been working. h3 remains 1.75 rem throughout the whole time. Not only just the h3 element but the image is also not resizing as defined. Can anyone could tell me what is that I'm doing wrong here.
Here is my component that has been using this style:
import React from 'react';
import { Image } from 'react-bootstrap';
import './index.css';
export const MyIcons = ({source,name}) => (
<div className="col-sm-4 addMargin50 text-center">
<Image className="thumbnailImg" src={ process.env.PUBLIC_URL + source } alt={name} roundedCircle />
<h3 className="font-nunito text-uppercase"> {name} </h3>
</div>
)
I also tried making a separate class to define the font-sizes on different breakpoints and added that class to my image and h3 element however none of them is working either.
Problems not with react, it's the order of your media queries. If you have overlapping rules it will always pick the final rule that was delcared. If you reverse the order of your media queries you should get what you want.
I have edited this answer to be more clear.
You should order your media queries from largest device to smallest device.
/* Medium devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991.98px) {
.thumbnailImg{
width: 40%;
}
h3{
font-size: 1.5rem;
}
}
/* Small devices (landscape phones, 576px and up)*/
#media (min-width: 576px) and (max-width: 767.98px) {
.thumbnailImg{
width: 35%;
}
h3{
font-size: 1rem;
}
}
/* Extra small devices (portrait phones, less than 576px) */
#media (max-width: 575.98px) {
.thumbnailImg{
width: 30%;
}
h3{
font-size: 1rem;
}
}
https://jsfiddle.net/txL5chk0/2/
Also, I am sure I don't need to tell you that the comments you have in your css file are not valid comments in CSS and should not be included with your code....
Related
Wow hard to get to work...but new to media queries...
Using angular2 btw...
very simple ...
If min-width: 576px do this, else that....
e.g.
Per the below if 576 then show the menu class and hide the toolbar class and vice versa
<ng-container class="menu" >
<i class="material-icons">menu</i>
</ng-container>
<ng-container class="toolbar">
<span color="accent" style="padding-right: 15px">SolarStack</span>
</ng-container>
Here is my css:
/*Small devices (landscape phones, 576px and up)*/
#media (min-width: 576px) {
.toolbar{
visibility: collapse;
}
}
/*Medium devices (tablets, 768px and up)*/
#media (min-width: 768px) {
.menu{
visibility: hidden;
}
}
/*Large devices (desktops, 992px and up)*/
#media (min-width: 992px) {
.menu{
visibility: hidden;
}
}
/*Extra large devices (large desktops, 1200px and up)*/
#media (min-width: 1200px) {
.menu{
visibility: hidden;
}
}
In essence how to I show or hide elements based on screen size using media queries? Menu will be shown with iphone and toolbar on desktop
You either need to set defaults for your class styles which you can then change at a specific screen size, or update your media queries to set styles on any class that changes at that size.
If min-width: 576px do this:
Meaning that for everything including & wider than 576 do:
#media (min-width: 576px) {
.toolbar{
visibility: hidden;
}
.menu {
visibility: visible;
}
}
else that:
Meaning that for everything narrower than 576 do:
#media (max-width: 576px) {
.toolbar{
visibility: visible;
}
.menu {
visibility: hidden;
}
}
In this fiddle, at least, it appears than min-width is inclusive and max-width is not. Try changing the width of the output iFrame between 575 & 576.
I would like to change the following two style settings in the #media class. I am failing to find the right classes. The subclasses .col-md change their numbering throughout the document.
I am a CSS noob and have never dealt with a #media class so far (is it even a 'class' because of the # tag?).
I searched the site but I am quite lost since I do not really know how to formulate my problem.
What is the correct way to set margin-left: 10% and width: 80%?
#media (min-width: 992px)
.col-md-offset-3 {
margin-left: 25%;
}
#media (min-width: 992px)
.col-md-6 {
width: 50%;
}
EDIT based on comment:
If what you want is to impact all .col-md disregarding numbers, you can use an attribute selector:
#media (min-width: 992px) {
[class*='col-md'] {
margin-left: 10%;
width: 80%;
}
}
Otherwise, if you wish to impact only the classes .col-md-6 & .col-md-offset-3 as you have included you can do:
#media (min-width: 992px) {
.col-md-offset-3 {
margin-left: 10%;
}
.col-md-6 {
width: 80%;
}
}
This means, that the styles applied inside the #media query, will only work on media viewports with a minimum width of 992px and above.
Make sure you set these at the end of your custom stylesheet which should be loaded after bootstrap styles.
You can find more info on #media querys here.
See if this works for you:
#media (min-width: 992px) {
.col-md-offset-3 {
margin-left: 10%;
}
.col-md-6 {
width: 80%;
}
}
#media is called a media query. The CSS which needs to be applied when the condition is met all goes between curly braces following the condition.
Use col-sm for scrren size between >=768px and <992px.
For eg.,
<div class="col-md-8 col-sm-10 col-md-offset-2 col-sm-offset-1"></div>
In the above eg col-md-* will only affect when the screen size is >=992px and <1200, col-sm-* when >=768 and <992. For more info.
Regarding media query, It's like a break point.
For eg.,
p { font-size: 16px; }
#media screen and (max-width: 480px) {
p { font-size: 12px; }
}
In the above example, p tag will have font-size of 12px only on screen size less than 480px. On all other devices it will have font-size of 16px. For more info.
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 am struggling with a website regarding media queries. I have this code snippet as part of my menu
.flexnav.flexnav-show {
margin-top: 52px; } line 513 in my css
and with a media query set at #media all and (min-width: 800px) I have this code snippet for my tablet.
.flexnav.flexnav-show {
margin-top: 0px; } on line 638 in my css
However, when viewing the page on a tablet the margin-top is still set at 52px.
I have a similar issue with a another media query. I have this following code snippet
#media only screen and (min-width: 481px)
header hgroup {
top: 12%;
}
For my desktop I have the following:
#media only screen and (min-width: 769px)
header hgroup {
top:15%;
} at line 462
When on the desktop the top is still 12%
This is the link to the website.
Thanks
-Sohail
You need to use "max-width"
EXAMPLE:
/* DEFAULT */
.some-div{top:30%;}
/* RESPONSIVE */
#media screen and (max-width: 769px){
.some-div{ top:15%;}
}
#media screen and (max-width: 481px){
.some-div{ top: 12%;}
}
Sometimes you can use "!important" to rewrite the previous state in CSS but is not necessarily.
I need to set a height on a div and i would like to set it relative to the device screen.
For ie :
/*Extra small devices Phones (<768px)*/
.myClass { height: 200px; }
/*Small devices Tablets (≥768px)*/
.myClass { height: 400px; }
/*Medium devices Desktops (≥992px)*/
.myClass { height: 600px; }
/*Large devices Desktops (≥1200px)*/
.myClass { height: 800px; }
Edit: Improved example at CodePen.
I would add to it from a bit different angle. Often times you might need to perform different operations in JS depending on your breakpoint. For that purpose I often use:
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
These 4 divs allow you check for currently active breakpoint. For an easy JS detection, you can have a set of 4 functions like this one :
function isMobile() {
return $('.device-xs').is(':visible');
}
Your question lacks enough detail for me to help you better, but in case what you need can't be achieved by simply defining different properties of an element in a different media query, you could assign certain class, at any point, by:
if( isMobile() ) {
$('.someClass').css('property', 'value');
}
#media screen and (max-width: 768px){
.myClass{
height:200px;
}
}
Generally with responsive webpages you just let content resize itself and just make divs the same height as eachother when they are on the same row. I assume you are using bootstrap as they have the same breakpoints. However I don't know the exact problem you are trying to solve so:
This mobile first approach by not adding media query for the smallest breakpoint as it is the default anyway. This will deal with infinitely large screen by setting height to 800px.
.myClass {
height: 200px; /*default extra small*/
#media (min-width: 768px) /*small*/
{
height: 400px;
}
#media (min-width: 992px) /*medium*/
{
height: 600px;
}
#media (min-width: 1200px) /*large*/
{
height: 800px;
}
Look at media queries.
#media (max-width: 768px) {
.myClass {
display: none;
}
}
#media (max-width: 992px) {
.myClass{
display: none;
}
}
#media (max-width: 1200px) {
.myClass{
display: block;
}
}
Use the viewport width and height after declaring the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
you can set .myClass height as a percentage of the viewport height and get rid of the media queries, like this:
.myClass { height: 30vh; }
You'll also need to define default class, for example screen size - greater than 1200px
/*Extra small devices Phones (<768px)*/
#media only screen and (min-width:768px){
.myClass { height: 200px; }
}
/*Small devices Tablets (≥768px)*/
#media only screen and (max-width:768px){
.myClass { height: 400px; }
}
/*Medium devices Desktops (≥992px)*/
#media only screen and (max-width:992px){
.myClass { height: 600px; }
}
/*Large devices Desktops (≥1200px)*/
#media only screen and (max-width:1200px){
.myClass { height: 800px; }
}