I'm using Bootstrap 3 with Less and wondering if the below is the proper way to attach multiple media query mixins to a class? It seems to work, but I am unsure as I am still learning Less.
I normally just write in the differing css in their own breakpoint query at the bottom of my stylesheet. However, there are times when I need more granular control of things and I thought this might be a cleaner way to do it when using BS.
.title h1 {
text-align: center;
font-size: 30px;
font-weight: 400;
#media (min-width: #screen-sm-min) {
font-size: 40px;
}
#media (min-width: #screen-md-min) {
font-size: 40px;
text-align: left;
}
#media (min-width: #screen-lg-min) {
font-size: 50px;
text-align: left;
}
}
Try this
.title h1 {
text-align: center;
font-size: 30px;
font-weight: 400;
}
#media (min-width: #screen-sm-min) {
.title h1 {
font-size: 40px;
}
}
#media (min-width: #screen-md-min) {
.title h1 {
font-size: 40px;
text-align: left;
}
}
#media (min-width: #screen-lg-min) {
.title h1 {
font-size: 50px;
text-align: left;
}
}
Related
I wrote this piece of code but it's not working
#media (max-width: 767px){
.navbar-brand {
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
.navbar-brand p {
font-size: .6em;
margin-top: 12px;
}
.navbar-brand p img {
height: 20px ;
}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span{
font-size: 1em;
}
}
I want to change my navbar when the screen is smaller than 767px but it doesn't work at all.
use min-width instead of using max-width
#media (min-width: 767px) {
.navbar-brand {
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
.navbar-brand p {
font-size: .6em;
margin-top: 12px;
}
.navbar-brand p img {
height: 20px;
}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span{
font-size: 1em;
}
}
Visit the following link to understand more about min-widht in css:
https://www.w3schools.com/cssref/playdemo.php?filename=playcss_min-width
You should probably use min-width for your media query in this case. Please read how to ask a proper question and update your question so we can better help you?
I am learning to develop wordpress theme and I found some strange and irritating problem.
on the desktop, everything is fine but when I opened it from mobile phone It gives different look.
I am attaching two screenshots of google chrome and Firefox output.
Where Firefox is giving decent look but google chrome is giving text bigger and does not sound good.
How can I fix the coding so that both could look same.
HERE IS THE CODE OF CSS
.home-2-article {
display: flex;
background-color: white;
box-shadow: 0 0 8px rgba($font-color, .5);
margin-bottom: 20px;
#media only screen and (max-device-width: 599px) {
display: flex;
flex-direction: column;
margin-bottom: 3rem;
}
& > * {
padding: .3rem;
}
&__thumbnail {
flex: 0 0 35%;
margin-right: 1rem;
#media only screen and (max-device-width: 599px) {
margin: 0;
}
img {
width: 100%;
height: auto;
}
}
&__wrapper {
&__title {
h2 {
font-size: 1.5em;
#media only screen and (max-device-width: 599px) {
font-size: 3em;
text-align: center;
}
}
}
&__meta {
display: flex;
#media only screen and (max-device-width: 599px) {
font-size: 1.7em;
justify-items: center;
justify-content: center
}
;
& > * {
padding: 0.5rem;
}
}
&__excerpt {
padding-bottom: .5rem;
p {
font-size: 1em;
#media only screen and (max-device-width: 599px) {
font-size: 2em;
padding: 0.3rem;
}
}
}
.home-2-article__rm {
a {
background-color: $primary-color-dark;
padding: 0.2rem .6rem;
color: white;
#media only screen and (max-device-width: 599px) and (max-width: 599px) {
font-size: 1.7em;
text-align: center;
display: block;
}
&:hover {
background-color: $primary-color;
transition: 1s all ease-in-out;
}
}
}
}
}
used 'scss to css' converter but have problems about media queries.
I was using 'codepen.io' site to use templates on my practice page. The css part was made with scss and I converted to css with 'scss to css' online converter. I have no idea to fix the problem of media queries inside h1 css class. how can I fix this in css?
h1 {
font-size: 4em;
margin: 0;
padding: 0 0 15px 0;
#media (min-width: 400px) {
font-size: 4.5em;
}
#media (min-width: 440px) {
font-size: 5.5em;
}
#media (min-width: 500px) {
font-size: 6.5em;
}
#media (min-width: 630px) {
font-size: 7.5em;
}
#media (min-width: 768px) {
font-size: 9em;
padding-bottom: 15px * 2;
}
#media (min-width: 1200px) {
font-size: 12em;
}
}
you need to write valid css media query
h1 {
font-size: 4em;
margin: 0;
padding: 0 0 15px 0;
}
#media (min-width: 400px) {
h1 {
font-size: 4.5em;
}
}
#media (min-width: 440px) {
h1 {
font-size: 5.5em;
}
}
// ...keep going like this
in the css you can not set style for media in one tag styling.
for example for h1:
h1{
font-size: 4em;
margin: 0;
padding: 0 0 15px 0;
}
h2{
color: red;
}
#media (min-width: 1200px) {
h1 {
font-size: 12em;
}
h2{
color: blue;
}
}
I've converted your css with https://www.sassmeister.com/ and all works as expected, the generated css is valid.
h1 {
font-size: 4em;
margin: 0;
padding: 0 0 15px 0;
}
#media (min-width: 400px) {
h1 {
font-size: 4.5em;
}
}
#media (min-width: 440px) {
h1 {
font-size: 5.5em;
}
}
#media (min-width: 500px) {
h1 {
font-size: 6.5em;
}
}
#media (min-width: 630px) {
h1 {
font-size: 7.5em;
}
}
#media (min-width: 768px) {
h1 {
font-size: 9em;
padding-bottom: 30px;
}
}
#media (min-width: 1200px) {
h1 {
font-size: 12em;
}
}
If you want to work with sass (.scss) you can convert your source to .css also from command line using cli like dart:
https://sass-lang.com/dart-sass
Or if you want there are a lot of other software the do a real time conversion in a lot of programming language.
I have a div with display:none (mobile first approach):
#my_div {
display: none;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
I use some media queries (after in the css) to display this div with some padding and font-size:
/* Between 600px and 649px */
#media (min-width: 600px) and (max-width: 649px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
/* Between 650px and 699px */
#media (min-width:650px) and (max-width:699px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}
/* Between 700px and 914px */
#media (min-width: 700px) and (max-width: 914px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
All works well until 699px. The third media query is not applied and the div isn't displayed.
If I use the following media queries, the div is displayed, but #media (min-width: 700px) is not applied. The #media (min-width:650px) is applied:
#media (min-width: 600px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
#media (min-width:650px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}
#media (min-width: 700px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
By using the chrome inspector I can see that over 700px it's applied the rule:
#my_div {
display: none;
...
}
EDIT
I have added one more media query
#my_div {
display: none;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#media (min-width: 600px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
#media (min-width:650px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}
#media (min-width: 768px) {
#my_div {
display: none; /* it doesn't work, also with !important */
}
}
#media (min-width: 915px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
The only rule that is not applied is #media (min-width: 768px).
In my CSS, there aren't other rules that affect the display of my_div div. I'm using Bootstrap 3.
EDIT 2
I added the Bootstrap hidden-sm class to the div my_div:
<div id="my_div" class="hidden-sm"><strong>My slogan</strong></div>
In this way the div isn't displayed between 768px and 991px, but I would to display it again from 915px.
SOLUTION
I updated the JSfiddle by AngelosCharalis and, by copying and paste my code, I found an invisible dot character. Now it works.
First you must start from the highest pixel.
#media (max-width: 914px) {
#myId {
}
}
#media (max-width: 699px) {
#myId {
}
}
#media (max-width: 649px) {
#myId {
}
}
#media (max-width: 599px) {
#myId {
}
}
I am trying to have my website 'responsive'. I have 2 columns and am trying to have them stack on each other when below 992px. This is the code I have for the columns and the code for the media query. Whenever I go below the 992px, col1 stays at 69% and col2 at 29% but both are floating left and stacked on top of each other. I am just wondering what I am doing wrong because I want them to take up the width of the screen when below 992px. Is the code for col1 and col2 overriding the #media? I have tried the #media with display: inline and display: block but neither worked. Sorry if it is messy, I only started learning last friday :)
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98%;
}
.col2 {
width: 98%;
}
}
.col1 {
margin: auto;
float: left;
width: 69%;
background-color: #686472;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
}
.col2 {
margin: auto;
float: left;
width: 29%;
background-color: #454349;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
padding-bottom: 39px;
}
.col1 {
margin: auto;
float: left;
width: 69%;
background-color: #686472;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
}
.col2 {
margin: auto;
float: left;
width: 29%;
background-color: #454349;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
padding-bottom: 39px;
}
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98%;
}
.col2 {
width: 98%;
}
}
Ideally though, you would create two more media queries, one with a max-width: 768px, and one with a min-width: 991px. This way you would account for the space above and below, and put all your numbers there so there are no conflicts.
Essentially what's happening is that anything that is outside of the media query applies to all widths. A simple, unorthodox solution to this problem would be to add '!important' to the rules inside media queries, without the need to change order.
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98% !important;
}
.col2 {
width: 98% !important;
}
}
However, the use of '!important' can become highly problematic in large stylesheets where conflicts may occur and hair begins to get pulled off, use it wisely.