I have this html code of one div in my wordpress site.
<div class="bwpb-column bwpb-video-holder backgr bwpb-colwidth-4 " style="color: rgb(255, 255, 255); text-align: inherit; width: 100%; min-height: 923px; height: 628px; background: url(http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png) 50% 100% no-repeat rgb(255, 255, 255);"><div class="bwpb-overlay" style="background-color:rgba(255,255,255,0.01)"></div><div class="bwpb-column-inner" style="padding: 0px 15px; margin-top: 461.5px;"></div></div>
All im trying to do is to set some media queries that will change this image if there is a laptop or a tablet or smartphone.
After some research i've tested this code but its not working
(I've set the class of this div to .backgr)
#media (min-width: 1200px) {
.backgr {
background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png") !important;
}
#media (max-width: 992px) {
.backgr {
background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
}
#media (max-width: 768px) {
.backgr {
background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-03.png") !important;
}
#media (max-width: 481px) {
.backgr {
background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-04.png") !important;
}
Does anyone have any suggestion of what should i put instead of my code so it will load other pics for phone/tablet/laptop ?
You forgot to put the closing bracket } on each media query.
Should be like this:
#media (min-width: 1200px) {
.backgr {
background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png") !important;
}
}
#media (max-width: 992px) {
.backgr {
background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
}
}
#media (max-width: 768px) {
.backgr {
background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-03.png") !important;
}
}
#media (max-width: 481px) {
.backgr {
background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-04.png") !important;
}
}
after each media query you should close bracket (}) .
and it's good to use this:
#media only screen and (max-width:700px) {
.backgr {
background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
}
}
Related
I'm creating an email with the below breakpoints, but I'm having some difficulties with the breakpoints.
The breakpoint below is not working on mobile, actually I used this same breakpoints for another email and it was working perfectly.
<style style="" type="text/css">
body {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: 0 !important;
}
p {
margin: 0 !important;
padding: 0 !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
td {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
a {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
#media only screen and (max-width: 4ii80px) {
table[class="em_wrapper"] {
width: 100% !important;
}
}
#media only screen and (max-width: 480px) {
table[class="em_main_table"] {
width: 100% !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_aside"] {
padding: 0 10px !important;
}
}
#media only screen and (max-width: 480px) {
br[class="em_hide"],
span[class="em_hide"],
table[class="em_hide"],
td[class="em_hide"] {
display: none !important;
}
}
#media only screen and (max-width: 480px) {
img[class="em_full_img"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (max-width: 480px) {
img[class="em_full_img1"] {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_side"] {
width: 10px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_spc_20"] {
height: 20px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_gap_bottom"] {
padding-bottom: 20px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_height_25"] {
height: 25px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_f11"] {
font-size: 11px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_height_35"] {
height: 20px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_text"] {
font-size: 18px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
table[class="em_wrapper"] {
width: 100% !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
table[class="em_main_table"] {
width: 100% !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_aside"] {
padding: 0 10px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
br[class="em_hide"],
span[class="em_hide"],
table[class="em_hide"],
td[class="em_hide"] {
display: none !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
img[class="em_full_img"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
img[class="em_full_img1"] {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_side"] {
width: 10px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_spc_20"] {
height: 20px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_gap_bottom"] {
padding-bottom: 20px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_height_25"] {
height: 25px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_f11"] {
font-size: 11px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_height_35"] {
height: 20px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_text"] {
font-size: 18px !important;
}
}
#media only screen and (max-width: 600px) {
.caption{
font-size: 20px !important;
color: red !important;
}
}
</style>
If you have mistakes like (max-width: 4ii80px) and certain constructions like [class="em_hide"], some email clients - particularly Gmail - will strip your entire <style> block. Use a CSS and HTML validator (there are plenty online), but ignore the warnings about deprecated code (HTML email uses a lot of deprecated code just fine).
Use https://www.caniemail.com/features/css-at-media/ to find out what you should expect.
Then also just use basic CSS selectors like .em_hide instead of [class="em_hide"].
I would also wrap the media queries in their own <style> block (yes you can have multiple), because some of the other things only apply to certain email clients, and Gmail doesn't like them. (For example Mso stuff only relates to Outlook desktop.)
The mistake was from the style tag
I typed instead of <style="" type="text/css">
Using SASS, I'd like to use different variables depending on viewport width. This is what I currently do:
$color: red;
div {
#media screen and (max-width: 500px) {
$color: red;
}
#media screen and (min-width: 500px) {
$color: orange;
}
}
p {
#media screen and (max-width: 500px) {
$color: red;
}
#media screen and (min-width: 500px) {
$color: orange;
}
}
/*hundreds of other selectors similarly written*/
Is there a quicker/better way of doing this? For instance, something like this pseudo-code?:
#media screen and (max-width: 500px) {
$color: red;
}
#media screen and (min-width: 500px) {
$color: orange;
}
div {
background-color: $color;
}
p {
background-color: $color;
}
/*hundreds of other selectors similarly written*/
EDIT:
Just discovered this solution (1st answer). Will go for it if people can confirm it's a common/recommended one...The same solution pops up here.
You can redeclare any variable anywhere you want in their current scope. The value of the variable will then be used until it is redeclared again.
$foo: red;
body {
background-color: $foo;
#media (min-width: 600px) {
$foo: blue;
background-color: $foo;
}
#media (min-width: 1200px) {
$foo: green;
background-color: $foo;
}
}
:root {
--color: red;
}
#media (min-width: 600px) {
:root {
--color: blue;
}
}
#media (min-width: 1200px) {
:root {
--color: green;
}
}
body {
background-color: var(--color);
}
yes, mixin will do the work for you
#mixin styling($main-color) {
// your SCSS here, e.g.
div {
background-color: $main-color;
}
}
#media screen and (max-width: 500px) {
#include styling($main-color: red);
}
#media screen and (min-width: 500px) {
#include styling($main-color: orange);
}
I need to change the font-size based on the view port, for that I am using the below code; however, I feel it's a bit redundant and un-professional. I believe that it should be a better way to achieve the same result.
P.S. I am using Bootstrap 4
#media (min-width: 0px) and (max-width: 500px) {
.block {
font-size: 5.1em !important;
}
}
#media (min-width: 501px) and (max-width: 800px) {
.block {
font-size: 6.1em !important;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
.block {
font-size: 4.8em !important;
}
}
#media (min-width: 1101px) and (max-width: 1300px) {
.block {
font-size: 5.5em !important;
}
}
#media (min-width: 1301px) {
.block {
font-size: 6em !important;
}
}
I made a separate media query for each style declaration. If the media query is the same, I assume you can group all the declarations within the same media query.
How do I do that?
#media only screen and (min-width: 960px) {
.component-text-block.small-image .no-wrap-text-right {
width: 390px;
}
}
#media only screen and (min-width: 960px) {
.component-text-block.small-image .image.left img {
width: 168px;
}
}
#media only screen and (min-width: 960px) {
.component-text-block-fullwidth.small-image .content-item img {
width: 250px;
}
}
The CSS Syntax is:
#media not|only mediatype and (media feature) {
CSS-Code;
}
So, You can include all your CSS Codes like this:
#media only screen and (min-width: 960px) {
.component-text-block.small-image .no-wrap-text-right {
width: 390px;
}
.component-text-block.small-image .image.left img {
width: 168px;
}
.component-text-block-fullwidth.small-image .content-item img {
width: 250px;
}
}
I'm editing a pre-existing stylesheet. It currently has #media sections for 0-319px and for 320-479px, as well as a few others for larger screens. I'm trying to add iphone-specific styles. However, my iphone's screen is 320px, but I don't want to put iphone styles in the 320-479 section, because I only want it to be applied to the iphone, not tablets. So, I added a new section to the end of my stylesheet that goes up to 329px, and put the specific styles in there, but they are not being recognized.
#media screen and (min-width: 0px) and (max-width: 319px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (min-width: 320px) and (max-width: 479px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
min-height: 90px;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
When I look at the stylesheet in dev tools, my new section is there, so it's not a cache issue. But it's not being applied (I have my window size at 323px).
Your first two media queries are mostly the same, with the exception of the min-height attribute in 320-479. Also, #media screen and (min-width: 0px) and (max-width: 319px) is the essentially the same thing as just #media screen and (max-width: 319px)
Why don't you refactor the media queries so that there are not overlapping media queries, like this:
#media screen {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 319px) {
.carousel-slide-dialog {
min-height: initial;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
#media screen and (min-width: 320px) and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
#media screen and (min-width: 330px) and (max-width: 479px) {
.carousel-slide-dialog {
min-height: 90px;
}
.carousel-slide-dialog p {
max-width: initial;
}
}