Im trying to make a responsive header that changes font size for multiple different sizes of devices, but when using the #Media screen and (max-width: X px), it wont do any changes that i apply with it.
My code
#media screen and (max-width: 690px)
{
.container
{
width: 100%;
}
#header
{
width: 100%;
right: 0%;
}
#header h1
{
display: none;
}
#nav a
{
float: none;
display: block;
text-align: center;
}
#nav-right
{
float: none;
}
#nav:before
{
display: block;
position: absolute;
top: 10px;
right: 0%;
line-height: 40px;
font-size: 21px;
cursor: pointer;
}
#nav:after
{
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
}
#media screen and (max-width: 509px)
{
#nav
{
font-size: 16px;
}
}
#media screen and (max-width: 409px)
{
#nav
{
font-size: 8px;
}
}
I just want it to change the font size, but its not working for what ever reason, please help
Thank you
W.
It needs to know where one starts and the other ends - this is done by one pixel for smooth responsive layout I usually find it easier to work from the low size up as the low size starts at zero pixels wide so no min-width needs to be mentioned.
I'm going to reorder your media queries narrow to wide screen:
#media screen and (max-width: 409px)
{
#nav
{
font-size: 8px;
}
}
/* now I'm going to put a min width on this so that it knows it's range does NOT start at zero and won't clash with the previous media query */
/* notice this is 1px bigger than the previous max-width */
#media screen and (min-width: 410px) and (max-width: 509px)
{
#nav
{
font-size: 16px;
}
}
/* now I'm going to put a min width on this so that it knows it's where it's range does NOT start at zero and won't clash with the previous media queries */
/* notice this is 1px bigger than the previous max-width */
#media screen and (min-width: 510px) and (max-width: 690px)
{
.container
{
width: 100%;
}
#header
{
width: 100%;
right: 0%;
}
#header h1
{
display: none;
}
#nav a
{
float: none;
display: block;
text-align: center;
}
#nav-right
{
float: none;
}
#nav:before
{
display: block;
position: absolute;
top: 10px;
right: 0%;
line-height: 40px;
font-size: 21px;
cursor: pointer;
}
#nav:after
{
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
}
/* and there you have it */
have you added the viewport in your html file? if not then add viewport in head
tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is a solution for your problem to apply media query when screen size changes.
I have written a sample of code just to explain the format of applying media query for different screen sizes:
body {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
.footer_class{
position: fixed;
bottom: 0;
background: #dfdfec;
width: 100%;
text-align: center;
}
.header_class {
position: fixed;
top: 0;
background: #dfdfec;
width: 100%;
text-align: center;
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px) {
.title {
font-size:14px;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px) {
.title {
font-size:20px;
}
}
<DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<Header class="header_class">
<h1 class="title">Header Section</h1>
</Header>
<article>
<p>Content Section</p>
</article>
<footer class="footer_class">
<h1 class="title">Footer Section</h1>
</footer>
</body>
</html>
let's break down your media query to two parts:
#media only screen
This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.
and (min-device-width: 320px) and (max-device-width: 568px)
This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.
I hope this helps you to solve your problem.
Related
I'm using media query to scale the font size as the window shrinks. I assign width & height values with rem unit to my containers.
When i open dev tools and resize the window everything works as expected. But on my mobile phone the design is broken.
Tested on Iphone 7 plus and Iphone xr using Safari and chrome.
Here is an example:
html {
font-size: 62.5%;
}
body {
height: 100vh;
}
.grid {
display: block;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(2, 30rem);
gap: 4rem 10rem;
grid-auto-rows: 30rem;
justify-content: center;
align-content: center;
}
.box {
width: 30rem;
height: 30rem;
background-color: green;
}
#media screen and (max-width: 1800px) {
html {
font-size: 60%;
}
}
#media screen and (max-width: 825px) {
html {
font-size: 40%;
}
}
#media screen and (max-width: 540px) {
html {
font-size: 30%;
}
}
#media screen and (max-width: 400px) {
html {
font-size: 25%;
}
}
#media screen and (max-width: 300px) {
html {
font-size: 15%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css?v=17" />
<title>test</title>
</head>
<body>
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Calculating the percentages my self and using pixels solved the problem. Still not sure why wouldn't it work on mobile while working completely fine on desktop.
#media screen and (max-width: 1800px) {
html {
font-size: 8px;
}
}
#media screen and (max-width: 825px) {
html {
font-size: 6px;
}
}
#media screen and (max-width: 540px) {
html {
font-size: 5px;
}
}
#media screen and (max-width: 400px) {
html {
font-size: 3px;
}
}
#media screen and (max-width: 300px) {
html {
font-size: 2px;
}
}
Since you are using rem to specify the sizes maybe this piece of code is causing the issue
**body {
height: 100vh;
}**
Again I checked your code in Dev Tools everything worked fine not sure, why the design is breaking on a mobile device, you can try specifying the height in rem only.
I have 3 media queries in my CSS which seem to work fine when I resize the browser, but don't when I use the responsive design tool from the inspector ("toggle device mode") and on mobile phones.
Here is part of my CSS :
#media screen and (max-width: 1500px) {
body {
width: 100%;
}
}
#media screen and (max-width: 1200px) {
body {
width: 100%;
}
#slider_container {
float: none;
padding-top: 2em;
width: 75%;
display: block;
overflow: hidden;
padding-left: 0px;
margin-left: auto;
margin-right: auto;
}
#slide_desc {
//
width: 30%;
display: block;
float: none;
margin-top: 0;
margin-left: auto !important;
margin-right: auto;
overflow: hidden;
font-size: 1.3em;
color: #353535;
/* line-height: 2em; */
text-align: justify;
font-family: georgia;
width: 80%;
}
}
#media screen and (max-width: 768px) {
#slider_container {
width: 100%;
margin: 0px;
padding: 0px;
padding-top: 1em;
}
#menu_button {
display: block;
width: 2em;
float: right;
margin-top: 0.5em;
margin-right: 2em;
cursor: pointer;
}
#top_menu {
overflow: hidden !important;
height: 3em;
/* background-color: gray; */
}
#top_menu>ul {
margin-top: 3em;
width: 100%;
height: 0;
position: absolute;
z-index: 100;
overflow: hidden;
}
#top_menu>ul>li {
margin: 0;
/* background-color:red !important; */
width: 100% !important;
display: block !important;
}
#top_menu>ul>li>a {
text-align: left;
width: 100%;
margin-left: 0;
padding-left: 1em;
height: auto;
}
#slides_container {
display: none;
}
}
The first 2 media queries always work fine, but the 3rd gets ignored. The 3rd media query only works if the browser itself is resized below 768px.
I know there are other similar questions, but are mostly related to the use of !important, or misplacement of the queries. My queries are at the end of the file, and what's strange is they do work if the browser is resized.
Any ideas why this might be happening?
You need to set your viewport meta tag to content="width=device-width, initial-scale=1". This tells the browser to render the width of the page at the width of the device's screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default).
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to
a specific number of pixels like width=600 or to the special value
device-width value which is the width of the screen in CSS pixels at a
scale of 100%. (There are corresponding height and device-height
values, which may be useful for pages with elements that change size
or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is
first loaded. The maximum-scale, minimum-scale, and user-scalable
properties control how users are allowed to zoom the page in or out.
You can read more about the viewport meta tag and how it works here.
Because you have a syntax error:
#slide_desc {
//
Double-slashes are not valid in CSS.
I know a decent amount of HTML, CSS, Jquery, and PHP. But when it comes to making a responsive web page I'm really new to it. So basically in my basic web page called 'colors.html' i have 4 divs. The 4 colors are yellow, blue, red, and green. So understanding what a responsive web page is supposed to be i did all my positioning and heights and widths in %'s. All my positioning is placed within a body that is relative, and all the elements inside it are absolute. It looks like it works fine, and i set a min-width to the all the divs so that when a user resizes the browser window it doesn't all scramble together. Am i doing this correctly or is there a much better way to do this?
<!doctype html>
<html>
<head>
<title> Test </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="colors.css">
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('#red').click(function() {
alert('Red');
})
$('#green').click(function() {
alert('Green');
})
$('#blue').click(function() {
alert('Blue');
})
$('#yellow').click(function() {
alert('Yellow');
})
</script>
</body>
</html>
body {
margin: 0;
position: relative;
}
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
#yellow {
position: absolute;
width: 20%;
height: 10%;
background-color: yellow;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 20%;
min-width: 150px;
}
#red {
position: absolute;
width: 20%;
height: 10%;
background-color: red;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 5%;
min-width: 150px;
}
#green {
position: absolute;
width: 20%;
height: 10%;
background-color: green;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 20%;
min-width: 150px;
}
You can use Media Rule to make responsive for each resolutions... it may be a litte bit too much work. but it will do work for u...
for example:
make new .css file call it whatever u want to. responsive.css
You will use all your tagst (div, ul, li, etc)... include it in ur html file in to tag...
well, for ecample you have:
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
in Media Rule tag it will look like:
#media screen and (max-width: 699px) and (min-width: 520px) {
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
#red {
}
.div {
}
}
#media screen and (max-width: 1000px) and (min-width: 700px) {
}
so u have to do it for each tag... dor a desctop, table, phone screen.
#media screen and (max-width: 1680px){
}
#media screen and (max-width: 1600px) {
}
#media screen and (max-width: 1440px) {
}
#media screen and (max-width: 1400px) {
}
#media screen and (max-width: 1366px) {
}
#media screen and (max-width: 1360px) {
}
#media screen and (max-width: 1280px) {
}
#media screen and (max-width: 1152px) {
}
#media screen and (max-width: 1024px) {
}
until 480px or lower. i don't know how small screen do u need.
Hope this will help you :)
The biggest problem of your concept, in my opinion, is that position: absolute is commonly used to render items out of the normal flow of the page. They are rendered above the page. This is how you place a drop-down menu, a tooltip, a modal window, a drawer that slides over the content or a mega-menu.
Placing all your content outside the normal flow just because you can is not particularly useful, since you don't actually need the functionality of placing elements outside the flow. You don't have a flow!.
When you start thinking about a layout you shouldn't think about CSS at all. All you should ask yourself is: how will my page be rendered on different sizes and proportions of screens?:
huge screens, with width so big all your paragraphs would be rendered as 1 liners (> 75em)
large screens: desktops, large laptops (62em > 74.9em)
medium devices: laptops/tablets (48em > 61.9em)
small devices most smartphones, tablets (34em > 47.9em)
very small screens (up to 33.9em)
After you come up with some display rules for various screen sizes and proportions, you should write them in order, from small to large or from large to small:
Example (large to small):
// CSS for very large screens
#media (max-height: 74.9em) {
// CSS overrides for large screens
}
#media (max-height: 61.9em) {
// CSS overrides for medium screens
}
#media (max-height: 47.9em) {
// CSS overrides for small screens
}
#media (max-height: 33.9em) {
// CSS overrides for very small screens
}
Another good practice is to aim to write as little code as possible. For example, instead of writing the same properties for each color, like you did, it would be better to make a class that holds all the common properties of your colors and apply it to all color divs.
.color {
position: absolute;
width: 20%;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto, sans-serif;
cursor: pointer;
border-radius: 5px;
min-width: 150px;
}
and than write in each #{color} {...} the specific properties for that particular div.
Keep in mind that, before using it, you should load a font-family, like Roboto to make sure it renders on all devices even if it's not installed.
#import url(https://fonts.googleapis.com/css?family=Roboto);
You should also specify a generic font-family type, just in case there is an error downloading the font file, so the browser renders the page as close to the original as possible.
Other than that, the only advice I have is: always test your CSS on all screen sizes and in at least 3 major browsers before going live.
Best of luck!
Good luck!
I have media queries for ipad in landscape and portrait mode to position elements a certain way in each view. I have everything looking the way it should, but the design breaks when I rotate from portrait to landscape. The proper layout will comeback if I refresh while on landscape, but I'm not understanding why it's breaking from portrait to landscape. And I have no problems when rotating from landscape to portrait.
here's the HTML
<main class="cf container">
<section class="cf weather-forecast">
<div class="loc-time">
<h1 id="location"></h1>
<p class="day" id="day"></span></p>
</div>
<div class="cf main-forecast">
<p class="temp" id="temp"></p>
<p class="summary" id="summary"></p>
<p class="icon" data-icon="" id="icon"></p>
</div>
<hr>
<div class="sub-forecast">
<p>Feels Like <span class="sub-forecast--feels" id="feels"></span></p>
<p>Windspeed <span class="sub-forecast--wind" id="wind"></span></p>
<p>Humidity <span class="sub-forecast--humidity" id="humidity"></span></p>
</div>
<footer>
<p>Weather source weather.com</p>
</footer>
</section>
</main>
and CSS
body,
html {
background-color: #ffffff;
height: 100%;
}
body {
font-family:"Apercu Light", Calibri, sans-serif;
font-size: 100%;
font-size-adjust:0.508;
font-style:normal;
font-weight:200;
}
.container {
min-height: 100%;
margin: 0 auto;
position: relative;
width: 80%; /* 1280 / 16 */
}
.day {
font-size: 1.000em;
}
.icon {
font-size: 4.688rem;
margin-left: 5.21472392638%;
top: 4.063rem;
}
#location {
font-size: 1.500em;
}
.icon,
.summary {
position: absolute;
}
.icon,
.temp,
.summary {
display: inline-block;
}
.summary {
font-size: 1.063em;
margin-left: 5.36809815951%;
top: 1.875em;
}
.main-forecast {
position: relative;
margin-bottom: 1.250em;
margin-top: 2.188em;
}
.sub-forecast {
margin-top: 1.875em;
width: 40%;
max-width: 222px;
}
.sub-forecast > p {
line-height: 24px;
}
.sub-forecast--feels {
margin-left: 43.2432432432%; /* 96 / 252 */
}
.sub-forecast--humidity {
margin-left: 45.045045045%; /* 100 / 222 */
}
.sub-forecast--wind {
margin-left: 38.2882882883%;
}
.temp {
font-size: 8.438em;
}
.temp-fahrenheit {
font-size: 2.188rem;
margin-left: 1.250rem;
vertical-align: super;
}
.weather-forecast {
margin-left: 8.875em;
margin-top: 20.438em;
width: 50.9375%; /* 652 / 1280 */
}
footer {
bottom: 0;
font-family:"Apercu Regular", Calibri, sans-serif;
font-size: 0.688em;
font-weight:normal;
position: fixed;
}
/*--------------------------media Queries----------------------------------------*/
/*****
Tablet
*****/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.sub-forecast {
min-width: 238px;
}
.weather-forecast {
margin-top: 12.188em;
}
} /* end #media max-width: 728px orientation: landscape */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.icon {
padding-top: 10px;
}
.icon,
.summary {
margin: 0;
position: static;
}
.icon,
.temp,
.summary {
display: block;
}
.sub-forecast {
min-width: 240px;
}
.weather-forecast {
margin-top: 16.500em;
}
} /* end #media max-width: 1024px orientation: portrait */
I wondered that if the problem you said related to font size changes, try adding this line into your CSS, if that helps.
body { -webkit-text-size-adjust: none; }
Edit: Problem might actually related to position: absolute; without set specific positions, and it gets confused when switching orientations. Try add this into the global CSS (not in media queries):
.icon,
.summary {
position: absolute;
top: 0; /*new*/
right: 0; /*new*/
}
And try also add the code into landscape media query if it still didn't work well.
If one adds two responsive gadgets say,
A navigation bar with a media query like this in the navigation style CSS file
#media screen and (max-width : 760px){
nav ul {
position: static;
display: none;
}
nav li {
margin-bottom: 1px;
}
nav ul li, li a {
width: 100%;
}
nav .show-menu {
display:block;
}
}
and a responsive slideshow with the media query >
#media screen and (max-width: 65.3125em) {
.description,
.tiltview {
width: 100%;
}
.tiltview {
left: 0;
opacity: 0.3;
pointer-events: none;
}
}
#media screen and (max-width: 33.75em) {
.description {
font-size: 1.1em;
}
.slideshow > nav span {
width: 20px;
height: 40px;
margin: 0 10px;
}
}
#media screen and (max-width: 24em) {
.slides {
height: 320px;
}
.description {
font-size: 1em;
padding: 1.4em;
}
.no-csstransforms3d .tiltview.col,
.no-csstransforms3d .tiltview.row {
top: 0;
}
}
My question is , when opening the website on a mobile device the responsive effect DO NOT work and the site remains fullscreen , why is that ? Is it because I have different media queries on different CSS sheets with different widths ?
Have you tried adding this meta tag to your head of your html page?
<meta name="viewport" content="width=device-width, initial-scale=1">