I'm extremely confused because I am pretty certain that I have it set up correctly. It doesn't set the font to 10 pixels on my phone and when I adjust the screen. Am I missing something?
Here's the code:
.above-email-box {
/* aligns text to the center with position absolute */
text-align: center;
position: absolute;
margin-top: 90px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
font-family: 'Glory', sans-serif;
font-family: 'Klee One', cursive;
font-size: 30px;
}
#media only screen (min-width: 768px) {
.above-email-box {
font-size: 10px;
}
}
Thanks.
.above-email-box {
/* aligns text to the center with position absolute */
text-align: center;
position: absolute;
margin-top: 90px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
font-family: 'Glory', sans-serif;
font-family: 'Klee One', cursive;
font-size: 30px;
}
#media only screen and (max-width: 768px) {
.above-email-box {
font-size: 10px;
}
}
<div class="above-email-box"> Demo Text</div>
Logical operators
The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.
You have to define max-width & min-width consciously, sometime it can be confusing, min-width means when you add styles into it, it display the styles after the min-width condition is met, if you define min-width:500px your styles are applicable on screens width 500px and above not below
In order to run the media query for mobile device you need to change min-width to max-width like below
#media (max-width: 768px) {
.above-email-box {
font-size: 10px;
}
}
When your screen width is below 768px it will change font-size to 10px
Related
I realize this is a duplicate, but the solutions I have tried do not work. For some reason, after adding the viewport meta tag, my media queries do not work on mobile. Does anyone know why?
Edit: The reason why was because my screen wasn't zoomed in at 100% width.
Here is the code:
#media only screen and (max-width: 1260px) {
.container {
margin-top: 300px;
}
h2 {
font-size: 3vw;
width: 800px;
}
p {
font-size: 2.5vw;
width: 800px;
}
}
#media only screen and (max-width: 550px) {
h2 {
width: 330px;
font-size: 5vw
}
p {
font-size: 4vw;
width: 330px;
}
}
Thanks.
I posted this a few months ago and now I realized it was because my screen was zoomed in. If you have this problem, make sure your window is set to 100% zoom.
I've been trying to implement some media queries for a single page, basically, I want to hide and resize some elements based on the viewport dimension.
The issue I'm currently running into is that for some reason the 2nd media query does not seem to trigger.
as I understand for media queries to run I need to add the meta field (that's already done). And that they should follow a cascade order...so from max resolution to min resolution.
for some reason, only the first query is triggering and the second is not.
as I understand the "woman-image" class should be hidden when I reach a 1100px width,
and "h2.fin-text-navy2" should become yellow...It never happens...
I really appreciate the help on this.
#media all and (max-width: 1400px) {
h1.fin-text-navy {
font-size: 500%;
line-height: .9;
text-align: center;
padding-left: 0px;
padding-top: 50px;
margin-bottom: 25px;
}
.woman-image {text-align: left;}
h2.fin-text-navy2{
font-size: 250%; text-align: center;
line-height: 1.5;
padding-left: 0px;
margin-bottom: 50px;
}
.grid-container {
grid-template-columns: .8fr .5fr;
grid-auto-rows: minmax(500px, auto);
}
.buttonCenter{ width: 90%; padding: 16px; font-size: 35px; }
}//end media
#media all and (max-width: 1100px) {
.woman-image{ display: none; }
h1.fin-text-navy {
font-size: 500%;
line-height: .9;
text-align: center;
padding-left: 0px;
padding-top: 50px;
margin-bottom: 25px;
}
h2.fin-text-navy2{
font-size: 200%;
text-align: center;
line-height: 1.5;
padding-left: 0px;
margin-bottom: 50px;
color: yellow;
}
.grid-container {
grid-template-columns: .8fr 0fr;
grid-auto-rows: minmax(500px, auto);
}
.buttonCenter{ width: 90%; padding: 16px; font-size: 35px; }
}//end media
The problem seems to be one of a simple error in your CSS.
There are a couple of 'comments' end media which start with a double slash. This is not correct CSS. If those (in this case in particular the first one) are removed then the second media query works.
It can be worth putting your code through a validator - in this case I used the W3C validator and it came up with the errors clearly showing the lines they occured on.
It's also worth lookiing in the browser dev tools to see exactly what CSS is being picked up and used on an element.
Incidentally, the code worked fine without the meta field that you mentioned (at least on Edge/Chrome Windows10).
Try this
first of all as you well said you need the meta viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Then in your CSS, I recommend adding all the styles for the biggest format available without media queries, and then create a media query for each desired format:
/*All sizes and big format (desktop)*/
.woman-image {text-align: left;}
/*Tablets*/
#media (max-width:1024px){
.woman-image {text-align: right;}
}
/* Tablet Portrait */
#media (max-width:768px){
.woman-image {text-align: center;}
}
/*Mobile */
#media (max-width:640px){
.woman-image {display: none;}
}
In the previous example the element with class .woman-image will have the following behavior:
Desktop: text-align: left;
Tablet: text-align: right;
Tablet Portrait: text-align: center;
Mobile: display: none;
You should try using min-width: 1100px in your first media query and use max-width: 1100px in your second media query.
Because if you are using max-width: 1400px than it means that "If your screen size is 1400px or less, than do the following task" , that's why for your screen's every value less than 1400px you are seeing your first media query at work.
Whereas if you use min-width:1100px in the first place than, than it would mean that "If your screen size is 1100px or more, than do the following". And than you should use max-width:1100px. so in this case 1100px will be a threshold value.
#media all and (min-width: 1100px){
//...do the task for 1100px and more
}
#media all and (max-width: 1100px){
//...do the task for 1100px and less
}
I'm very new to programming and I'm trying to modify my Retina template to customize my Shopify store. It's been fun so far and have had good results!
However I'm stuck on this question: How do I make my code responsive?
I managed to add the HTML and CSS codes to have text over image, but I can't figure out to make it responsive (text automatically adjust its size) for smaller screens (ex. mobile)
HTML Code
<div class="textoverimage">
<img src="xxxxxx" alt="xxxx">
<h7> TEXT </h7>
</div>
CSS Code:
/* #Custom Styles
================================================== */
.textoverimage {
position: relative;
width: 100%;
}
h7 {
position: absolute;
top: 75px;
left: 0;
width: 100%;
text-align: center;
}
I used h7 not to interfere with any preexisting codes (Shopify used h1-h6)
You can attain it through media queries.
#media only screen and (max-width:500px) {
h7 {
font-size:14px;
}
}
This will make the font size of the h7 to 14px when the screen width drop below 500px.
If your making custom css in shopify then you need both image and text responsive
Here is your answer for make them both responsive Live On FIDDLE.
.img-reponsive {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.textoverimage {
position: relative;
}
p.title {
position: absolute;
top: 75px;
left: 0;
text-align: center;
font-size: 38px;
width: 100%;
color: #fff
}
#media only screen and (max-width: 767px) {
p.title {
font-size: 1.5em;
line-height: 1.5em;
}
}
#media only screen and (max-width: 479px) {
p.title {
font-size: 1.1em;
line-height: 1.1em;
}
}
<div class="textoverimage">
<img class="img-reponsive" src="http://cdn.shopify.com/s/files/1/0258/1101/t/2/assets/slideshow_3.jpg?5808719635421587686" alt="xxxx">
<p class="title"> TEXT </p>
</div>
How can I set padding to 0 when I have resolution 1366x768px if its higher then 768 then i want padding to be 60 on top
This is what I tried so far but it is not working (tried with min-height, max-height, etc). Any other solution for this?
#media (min-height: 768px) {
body{
padding-top: 0px;
}
}
body {
padding-top: 60px;
padding-bottom: 0px;
margin: 5%;
}
so how can i remove padding when my resolution is smaller then 786px ?
You specified the rules in wrong order. They should be:
body {
padding-top: 0;
padding-bottom: 0;
margin: 5%;
}
#media (min-height: 768px) {
body {
padding-top: 60px;
}
}
NB: it seems like you are trying to target 768px tall screens, the actual height used by the browser will be lesser.
I have header text overlaid on an image. The issue is that on higher resolution desktop screens (e.g., > 1600px) the header only takes up a small section of the image width. I want the header text to take up ~90-100% of the available width regardless of the res.
http://www.dailyspiro.com
<div class="container-fluid">
<div class="col-md-12 landing-container">
<img src="images/pig.jpg" class="main-image" width="70%">
<div class="uvp">
<h1>Spread Compassion & Track Your Impact</h1>
<button class="join-button">Join Now</button>
</div>
</div>
</div>
.uvp {
padding: 5px 5px 5px 14px;
width: 70%;
background: rgba(66,51,51,.77);
margin: -119px auto 0px auto;
display: block;
text-align: left;
}
.uvp h1 {
color: #fff;
font-size: 247%;
margin-top: 12px;;
}
.landing-container {
padding: 0;
margin: -15px auto 0 auto;
text-align: center;
}
.main-image {
z-index: -1;
position: relative;
}
If you want the header take up ~90-100% of the available width space for higher resolution desktop screens (e.g., > 1600px), style the header accordingly using specific Media Queries.
You can use Media Queries, Some media queries for Standard Devices are:
/* Large screens ----------- */
#media only screen
and (min-width : 1600px) {
/* Styles */
/* Set your font-size here */
}
CSS:
/* Large screen above 1400px */
#media only screen and (min-width: 1400px) {
body {
.uvp h1 {
font-size: your larger size here;
margin-top: your larger size here;
}
}
}
Note: you have double (;;) semicolon in your above margin-top marking.
use cssmediaqueries
CSS Media Queries are a feature in CSS3 which allows you to specify
when certain CSS rules should be applied. This allows you to apply a
special CSS for mobile, or adjust a layout for print.
#media only screen and (max-width: 1633px) and (min-width: 1400px) {
.uvp h1 {
color: #fff;
font-size: 247%; //use your desired bigger font size
margin-top: 12px;;
}
}