I'm trying to make my text responsive on my wordpress theme but I'm having problems with the media query
I've looked all over and nothing has been able to help
https://ibb.co/w6bSdJ9
#media (min-width: 320px) and (max-width: 680px) {
h2.h2 {
font-size: 12px;
}
}
#media screen and (max-width: 680px)
{
.heading-text h2 {
font-size: 12px;
}
}
Related
solved it:
-webkit-text-size-adjust: 100%;
/* Prevent font scaling in landscape while allowing user zoom */
I have a small font-sizing issue when rotating from portrait to landscape. When testing on responsive mode in safari the font-sizing is working fine, but when testing it on my iPhone 5s the font-size works fine in portrait mode, right font-size the way i set, turning to landscape bigger font-size. The navigation shows the right font-size, but when opening it also changes bigger. All the font-sizing is done on the body tag with px, don't need to specify it separately or use em,rem etc. Can't find where the problem is. Again in responsive mode Safari everything is working.
* {
margin: 0;
padding: 0;
}
body {
font-family: helvetica, arial, sans-serif;
font-size: 23px;
font-weight: normal;
text-align: left;
line-height: 1.2;
color: black;
}
h1, h2 {
font-size: inherit;
font-weight: inherit;
text-decoration: none;
-webkit-hyphens: auto;
hyphens: auto;
}
#media screen and (max-width: 1112px) { /* all after this breakpoint size to 20px */
body {
font-size: 20px;
}
}
#media screen and (max-width: 1024px) { /* all after this breakpoint size to 18px */
body {
font-size: 18px;
}
}
Try to use this media queries:
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1025px),
only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: 1025px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 1025px),
only screen and ( min-device-pixel-ratio: 2) and (max-width: 1025px),
only screen and ( min-resolution: 192dpi) and (max-width: 1025px),
only screen and ( min-resolution: 2dppx) and (max-width: 1025px) {
body {
font-size: 18px;
}
}
For iPhone7 I use this media query:
#media only screen
and (device-width : 375px)
and (-webkit-device-pixel-ratio : 3) {
body {
font-size: 18px;
}
}
Also, you can combine this media queries to resolve your issue.
I have several media queries, but there are two that I'm trying to use to style a certain element:
.navbar-default .navbar-nav>li>a
Here is my CSS including previous media queries:
#media (min-width: 1024px) {
.header-column-secondary {
width: 13%;
}
}
#media (min-width: 768px) {
#gatewaylogo {
height: 85px;
padding-left: 0px;
padding-top: 10px;
}
.phone-number {
font-family: 'Oswald', sans-serif;
color: #ffffff;
font-size: 16px;
position: relative;
}
.social-media {
color: #ffffff;
display: table-cell;
padding: 5px 0 5px 5px;
transform: translateY(-7%);
}
}
#media screen and (max-width: 1024px) {
.navbar-default .navbar-nav>li>a
{
font-family: 'Oswald', sans-serif;
color: #1B3764;
text-transform: uppercase;
font-size: 22px;
line-height: 100px;
margin-right: 60px;
padding-left: 0;
padding-right: 0;
}
}
#media screen and (max-width: 768px) {
.navbar-default .navbar-nav>li>a {
font-family: 'Oswald', sans-serif;
color: #1B3764;
text-transform: uppercase;
font-size: 22px;
line-height: 100px;
margin-right: 20px;
padding-left: 0;
padding-right: 0;
}
}
You can see that the media queries that are applying to .navbar-default .navbar-nav>li>a are (max-width: 1024px) and (max-width: 768px)
The idea is that from 1024px - 769px, I want .navbar-default .navbar-nav>li>a to get margin-right: 60px, and at 768px, tablet size, I want .navbar-default .navbar-nav>li>a to get margin-right: 20px. I plan on continuing to add media queries as the browser width gets smaller - 475px, 375px, and 320px.
So why is it that at 768px, the media query doesn't render? It seems that the media query for 1024px is still getting the style and overriding it. I don't want to add !importants, because then I will continue to have to add !importants all the way down to 320px.
A problem is that I like to design from desktop to mobile - not mobile first. Any suggestions? The website is live here: http://nowordpress.gatewaywebdesign.com/
Thanks
Your are missing a viewport meta tag in the head of your page, add something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Good luck!
There are 2 issues in this problem:
viewport definition is missing
both min-width and max-width need to be defined to get media query in this scenario to work.
Here is some detail explanation:
There is no rule_override_based_on_min/max_width in media query. That is, if there are 2 media query rule-set, one is (max-width: 1024px) and another is (max-width: 768px), there is no guarantee that rules inside (max-width: 768px) will override rules inside (max-width: 1024px) -- when conflict happens between 2 rules inside 2 different media query rule-set, the one that appear later in the CSS win. That's why you need both min-width and max-width for media query.
Here is a simple example: although (max-width: 5000px) is a more reasonable rule to take effect, the final background color is pink.
#media (max-width: 5000px) {
.testd {
background: yellow;
}
}
#media (max-width: 100000px) {
.testd {
background: pink;
}
}
<div class="testd">DDD</div>
And David is correct, the viewport definition is missing. Without it, media query is impossible due to pixel ratio.
I think you need a media query like this:
#media (min-width: 768px) and (max-width: 1024px)
The CSS is in a .scss file and being minified with Gulp which works without any issues. I'm testing the responsiveness is Chrome(resizing the webpage). I have added
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML
<div class="container text-center" >
<h1 class="banner-title">Welcome Refugees</h1>
</div>
.SCSS
.banner-title {
margin-top: 275px;
font-size: 700%;
}
#media only screen and (min-width: 400px)
and (max-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
.banner-title {
font-size: 500%;
}
}
Is this a common issue?
I've been using $sm, $md, $lg, $xl as SASS variables to represent different sizes.
$sm = 600; // #media screen queries don't compile correctly
$sm = 600px; // #media screen queries work as expected
Hopefully this helps someone
i found this on a blog
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
profile-pic {
float: left;
width: 250px;
}
#media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
float: none;
}
}
#media screen and (min-width: 1200px) {
.profile-pic {
float: right;
}
}
Basically, I am resetting all my font-size to work with all screen sizes. basically i am resetting to 10px.
the issue is, one of the query i am using here:
#media screen and (min-width: 321px) and (max-width: 480px) {
body {
font: normal 2.083333333333333vw/1 normal sans-serif;
}
}
Is not giving correct output to 360 screen size. since above sets from 321 to 480 - but not setting with 360 screen.
what is the wrong here?
Here is my full resetting to 10px to all view ports.
p {
font-size: 1.2em; //in all media it will be 12px.
}
#media screen and (max-width: 320px) {
body {
font: normal 3.125vw/1 normal sans-serif;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
body {
font: normal 2.083333333333333vw/1 normal sans-serif;
}
}
#media screen and (min-width: 481px) and (max-width: 640px) {
body {
font: normal 1.5625vw/1 normal sans-serif;
}
}
#media screen and (min-width: 641px) and (max-width: 768px) {
body {
font: normal 1.305483028720627vw/1 normal sans-serif;
}
}
#media screen and (min-width: 769px) and (max-width: 1920px) {
body {
font: normal 1vw/1 normal sans-serif;
}
}
UPDATE
What i expect is : whatever the view port size, the min-font size should be 10px.example (320px) and more than this view-port the font-size should be maxium 14px. how to make this?
I have below script, it's doing fine in firefox and chrome. ie9 doesn't show the change of colors.
<style type="text/css">
body {
background-color: #FF77BB;
}
#media screen and (max-width: 960px) {
body {
background-color: #8A2BE2;
}
}
#media screen and (max-width: 768px) {
body {
background-color: #FF8C00;
}
}
#media screen and (max-width: 550px) {
body {
background-color: #7FFF00;
}
}
#media screen and (max-width: 320px) {
body {
background-color: #CC0011;
}
}
}
</style>
Works fine for me, just get rid of the extra } at the very end, the other browsers may not make it an issue but IE9 is very picky, if one thing is off it breaks the whole thing.