I created a website where I used rem unit for measurement across the stylesheet for every element, so that when I needed to make it mobile responsive, I just had to reduce the root font size and everything else would scale down accordingly. One problem I encountered here is that iOS/Safari does not follow the styles exactly as it should be. The width and height of elements are a little larger than they should be in iOS, resulting in content being pushed out of the viewport. This is not the case with android, everything scales down properly there. I'm not using Bootstrap or any other framework, just plain CSS(SCSS).
For comparison, here are some screenshots on both android and iOS-
Comparison 1- Android and iOS
Comparison 2- Android and iOS
Also to be noted, layout doesn't break until and below 245px width, while the iPhone here was iPhone XS Max which has width over 400px I believe, so its definitely not because of smaller screen this is happening, its something else.
The root font size at various stages is defined like this-
html {
font-size: 62.5%;
}
#media(max-width: 900px) {
html {
font-size: 55%;
}
}
#media(max-width: 660px) {
html {
font-size: 45%;
}
}
#media(max-width: 500px) {
html {
font-size: 35%;
}
}
#media(max-width: 380px) {
html {
font-size: 30%;
}
}
So, is there any way I can fix this?
Thanks in advance :)
Related
So this question seems to be asked a lot but in the reverse.. I'm having the issue where my media query is overriding the previously set styles in a mobile first design and I don't know why. Mobile should be padding: 33rem 0 and desktop should be padding: 18rem. See below.
.description {
background-image: linear-gradient(#b676fa,#14D8EB);
padding: 33rem 0;
}
#media only screen and (min-width: 900px) {
.description {
padding: 18rem;
}
}
Works fine for me.. All brackets closed? Run it through a CSS validator perhaps - https://codepen.io/pmackey-deveire/pen/vYBvxQz
Have you checked the inspector to see what styles are being applied as you change the window size?
Perhaps using PX instead of REM for testing.. 33rem appears to be smaller than 18rem on mobile so you might be tricked into thinking it's not working
I'm a bit lost with CSS handling in order to manage stylesheet about screen size. I'm developing a Django website project and I'm confronting to a very delicate situation.
My project is developped on a very good screen (Retina screen) with a very high resolution. But, when I'm watching my project on a very bad screen resolution, some elements are not situated where it should be.
I put for example part from a .css file corresponding to HTML base template :
/* ############################################# */
/* CSS File about Home application properties */
/* ############################################# */
#import url("http://bootswatch.com/flatly/bootstrap.min.css");
/* If screen less than 1440px */
#media screen and (max-width: 1440px) {
.navbar-right {
/*padding-left: 250px;*/
position:absolute;
right:2%;
}
}
/* If screen bigger than 1440px */
#media screen and (min-width: 1450px) {
.navbar-right {
/*padding-left: 400px;*/
position:absolute;
right:2%;
}
}
/* Define background color from upper navbar */
.navbar-inverse {
background-color: #007A5E !important;
}
/* DatasystemsEC tab */
.navbar-inverse .container-fluid .navbar-header .navbar-brand {
color : white;
}
/* Tab properties from navbar */
.navbar .nav > li > a {
color: white;
}
footer {
text-align: center;
margin-top: 35%;
}
How I can handle CSS stylesheet in order to adapt the file to screens resolution ?
Can you tell me what is right or wrong in following ideas :
I have to write only % and not px in order to take account screen resolution
I have to write CSS file firstly for screen resolution between a and b, then between b and c, ...
For example, the main content in my Django website corresponding to the class = "col-sm-8". I added margin-top = -68% in order to situate the content exactly where I want. But with my friend's screen, the same block is not where it should be.
I'm really new with CSS (and Django too) because I'm learning at the same time I'm coding in order to realize my project.
Thank you if you could help me on this subject.
Current consensus is to approach web development "mobile first". That means start from the smallest screen size and work up to the largest. Bootstrap does exactly that.
In order to decide what are the best suited media queries for your project see this tutorial and this documentation on MDN. Since you are using Bootstrap, I would suggest following the same breakpoins to avoid inconsistencies.
Also, consider using vw and vh instead of percents, when appropriate (I believe this might be part of that margin-top problem). Percents are relative to a container's dimensions. vw and vh are relative to the width and height of the viewport (see in MDN).
I have a Chrome-only problem with my Bootstrap (v3.3.5) layout css at exactly 767px where the layout styles simply aren't being applied.
Here's the behaviour after experimenting with the console on 3 browsers...
Chrome
-window.innerWidth of <= 766 - correctly shows mobile layout
-window.innerWidth of == 767 - incorrectly applies no layout styles
-window.innerWidth of >= 768 - correctly shows full screen layout
Firefox
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout
-window.innerWidth of >=768 - correctly shows full screen layout
Safari
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari not accounting for scrollbars in the same way)
All my media queries have been created as follows...
#media (max-width: 767px) {
/*small view*/
}
#media (min-width: 768px) {
/*full view*/
}
I've experimented changing these values so there's an overlap (e.g. a min-width of 767px) but it has no effect.
Apologies if this is a little vague, but I don't really know where to go from here in investigating the problem and have found only one report of similar behaviour from a previous version of bootstrap (https://github.com/twbs/bootstrap/issues/1531).
Does anyone know of any possible reason that I'd be seeing this on Chrome only? Either way, any advice on an appropriate way to investigate would be very much appreciated.
-- EDIT --
After hours of research I tested this simple file...
<html>
<head>
<style>
#media (max-width: 767px) {
.headlineText {
font-size: 10px;
color: red;
}
}
#media (min-width: 768px) {
.headlineText {
font-size: 10px;
color: green;
}
}
</style>
</head>
<body>
<h1 class="headlineText">this is a headline</h1>
</body>
</html>
On Chrome only - at 767px the text is neither green or red - it's black, Times New Roman, and considerably bigger than 10px. Of course I can't replicate this by uploading to a fiddle/codepen - so it must be something to do with the fact I'm running on a localhost (via MAMP). Absolutely zero ideas why that would be the case, but at least it doesn't seem to be something that will affect me in a live environment
Chrome (for me version 89.0.4389.82 on Win10) seems to work with fraction of pixels. Hence, increasing all lower breakpoint thresholds by .9px solved the issue for me. So for example
max-width :767px needs to become max-width :767.9px
Make this full screen and resize your window. It works for me in Chrome and has no display of "does not work" in between.
.works {
display: none;
}
.does-not-work {
display: block;
}
#media(max-width:767px){
.works {
display: block;
}
.works::before {
content: 'max-width: 767px | ';
}
.does-not-work {
display: none;
}
}
#media(min-width:768px){
.works {
display: block;
}
.works::before {
content: 'min-width: 768px | ';
}
.does-not-work {
display: none;
}
}
<span class="works">works</span>
<span class="does-not-work">does not work</span>
Side note, based on comments: About a year ago I had the same issue with a huge website. Result of a team of 6's work of nearly two years. Bits of code pouring in from all sides. I was the one gluing front-end together, making sure it all worked. You can imagine #media queries were a mess. I only got rid of the bug by refactoring all queries using mobile first principle - I grouped all #media's using Bootstrap's exact order. Fixed it for me. To this day I don't know what caused it. It was (slightly) broken on (exactly) 768px and 992px before.
Created a responsive site in Dreamweaver CS6 using the Fluid Grid system. All break points initially worked fine, and I had 3 separate layouts for desktop, tablet, and mobile; with different resolutions, each Fluid Grid Layout Div Tag would rearrange on the page into different columns. Every div on the page is set up with width: __%; in the CSS so that they expand and contract with the browser size.
Everything is responsive on the page and works correctly; however, somewhere during development I lost the Tablet break point, in a sense. When the browser reaches the 768px width which should break the page into the Tablet layout, it instead jumps straight to the mobile formatting, which should not happen until 480px.
In Dreamweaver, I can view the formatting I have set for the Tablet layout, in Design mode it will show me the correct layout of columns of DIVs and content; however, once I place DW in Live mode, or preview in a browser, it no longer has the Tablet functionality, just Desktop and Mobile formatting.
I will post the CSS code for the #media queries and the subsequent .gridContainer code - trying to see if a solution could be found without having to post the entire CSS code, as there's quite alot. Please let me know if I need to edit my question and include more code - perhaps the truncated code of a few DIVs and their responsive values for each layout? I'd be happy to post any more information if it will help resolve this issue.
Thank you in advance for any support or advice!
CSS:
/* Mobile Layout: 480px and below. */
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
border:1px solid #00133e;
background: #004aa1;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
Found the solution:
Near the end of my mobile layout CSS style code, there was an extra curly brace. Removed the brace, responsiveness returns.
Very simple solution; thanks to #MrRO for pointing me in the right direction to look!
Assuming, this is copy paste of actual code. In the given CSS, I believe you have have missed one curly braces, which was suppose to close the style for <480 width devices.
background: #004aa1;
} <-- Here one more "}" needed
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
I am making a responsive HTML email. When I open it on a mobile device (e.g. iPhone), the layout is responsive, but the fonts are tiny.
The only solution seems to be redeclare the fonts in a media query at a bigger size. Getting the right size takes a lot of trial and error.
Obviously, having two sets of font declarations is inefficient to maintain so I want to use SCSS to streamline it.
This is what I have at the moment:
h1 {
font-size: 28px;
line-height: 36px;
}
h2 {
font-size: 14px;
line-height: 18px;
}
#media only screen and (max-device-width: 615px) {
$increase: 8px;
h1 {
font-size: 28px + $increase;
line-height: 36px + $increase;
}
h2 {
font-size: 14px + $increase;
line-height: 18px + $increase;
}
}
This is good as I can just alter the $increase value to make my mobile fonts bigger. However, I have over 20 font declarations (for different emails), so if I update the desktop sizes (e.g. change h1 from 28px to 32px), I then have to update mobile declaration, which is time consuming.
Is there any way I can use SASS to have one set of font declarations and then automatically have the mobile versions increase in size (while still having the flexibility to do some custom overrides if the $increase value isn't suitable for a particular style).
Steps I have tried to overcome the problem:
1. Using Rem/Ems:
These don't seem to be supported by all Desktop browsers. Using PX seems to be the only way to get the size right.
2. Using Scale meta tag:
e.g. <meta name="viewport" content="width=device-width">
This causes some mobile browsers to display a white screen (Blackberry)
You can use rems! Use the font-size:62.5%; trick on your html element first, and then you can set up several media queries just to resize the rems.
#media only screen and (min-width: 385px) {
html{font-size:68%;}
}
#media only screen and (max-width: 370px) {
html{font-size:62.5%;}
}
#media only screen and (max-width: 350px) {
html{font-size:61%;}
}
#media only screen and (max-width: 330px) {
html{font-size:59%;}
}
And for the desktop clients that don't support rems you can just put your px definitions first in the inline css (or style tag):
font-size:14px;
line-height:16px;
font-size:1.4rem;
line-height:1.6rem;
I'm currently working on a way to get SASS mixin to copy the px values and convert them to rems, but it's tricky because of the decimal point. If i finish i'll post a comment! Or if you beat me to it please let me know ;)
The only thing you can really do is use extends, and I caution you to use them sparingly as they can really bulk up your CSS:
%size-1 {
font-size: 1.1em;
}
%size-2 {
font-size: 1em;
}
#media (min-width: 30em) {
%size-1 {
font-size: 1.2em;
}
%size-2 {
font-size: 1.1em;
}
}
h1 {
#extend %size-1;
}
h2 {
#extend %size-2;
}
You should not need to modify your line-height every time you change the font-size if you specify it without units (eg. line-height: 1.5).