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!
Related
I came across a problem on my HTML file. I'm fairly new to HTML, and as I was making a topbar for my static website here, I tried to add a hover to it, but it isn't working correctly, only at the "search" and "cart" buttons (and it kinda works at "contact us" too, but only at its right side) .
So, I'm not sure why the hovering doesn't work on all buttons, even though the topbar looks ok at first glance. Am I overriding something I shouldn't? This got me confused. Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#topBox {
height: 250px;
margin-top:-50px;
margin-left: auto;
margin-right: auto;
background: #cbe9f3;
border-radius: 15px;
}
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed;
color: white;
font-family: "Cute Aurora Regular";
}
.topnav {
overflow: hidden;
font-family: "Cute Aurora Regular";
background-color: transparent;
border: #c9c7c7 0.1px solid;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border-left: none;
border-right: none;
}
.topnav a {
float: left;
color: #b47d50;
text-align: center;
margin-left: 27px;
padding: 14px 16px;
margin-right: -20px;
text-decoration: none;
font-size: 19px;
font-weight: bold;
}
.topnav a:hover {
color: #ecb2ad;
}
.topnav a.search {
margin-left: 290px;
}
.topnav a.cart {
margin-left: 25px;
}
br {
display:none;
}
/* Desktop grande */
#media (min-width: 1025px) {
#topBox {
width:1000px;
}
#container {
font-size: 600%;
}
#containerBunny {
width: 250px;
margin-left: 550px;
margin-top: 150px;
}
.topnav {
width: 1000px;
}
}
/* Desktop pequeno */
#media (min-width: 769px) and (max-width: 1024px) {
#topBox {
width:750px;
}
#container {
font-size: 500%;
}
#containerBunny {
width: 200px;
margin-left: 460px;
margin-top: 170px;
}
.topnav {
width: 745px;
}
}
/* Tablets */
#media (min-width: 481px) and (max-width: 768px) {
}
/* Mobile */
#media (min-width: 320px) and (max-width: 480px) {
#topBox {
width:1000px;
}
#container {
font-size: 520%;
}
#containerBunny {
width: 250px;
}
br {
display: block;
}
}
</style>
</head>
<body>
<div id="topBox">
<div id="container">
<p>Bunny <br>Shop</p>
</div>
<img id="containerBunny" src="images/molangMilk.png" alt="">
</div>
<div class="topnav">
HOME
NEW
SALE
PRODUCTS
CONTACT US
<a class="search" href="#search">SEARCH</a>
<a class="cart" href="#cart">CART</a>
</div>
</body>
</html>
Two quick and lazy solutions are to add the following to the #topBox div:
pointer-events: none; will allow you to click "though" the div to the navbar
height: auto; will prevent the div from overlapping the navbar
The reason the rollover isn't working as expected is the #container & #containerBunny divs are covering the topnav div.
You can see the overlapping divs here
I recommend adding the Pesticide Chrome extension to help visualise your divs and make it easier to see what's going on.
Your element with the ID of "container" is overlaying your navigation buttons. It's not to do with your hover logic.
You need to adjust your layout so container no longer sits on top, as mouse events only propagate to the topmost element.
Assuming container is for holding your "Bunny Shop" header. I would suggest adjusting the height of this element. You will probably find that it doesn't need to use the "fixed" positioning, and can sit relative to it's parent component. Fixed sits an element absolutely, relative to the viewport itself.
Your container element overlap the topbar or navigation item due to you fixed the container.
chnage your code from
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed; // remove it.
color: white;
font-family: "Cute Aurora Regular";
}
to
#container {
margin-left: 27px;
margin-top: 41px;
color: white;
font-family: "Cute Aurora Regular";
}
Now you can hover navigation.
I'am working on HTML/CSS project, Project contains 3 files:
index.html
contacts.html
style.css
Two web pages and one CSS file, project almost done.
index.html// fully adaptive
contacts.html adaptive for laptops, tablets, but when I use:
#media(max-width: 667px){
}
contacts.html displayed not in full size:
http://prntscr.com/umgkzw
here is link to web page:
https://imbabot.000webhostapp.com/contacts.html
How I should fixed it?
This part of your CSS seems to cause the problem:
#media (max-width: 1024px)
#media (max-width: 667px)
#media (max-width: 1024px)
.contacts {
padding-left: 180px;
padding-right: 180px;
}
A padding is set to your .contacts class. Try removing this padding, as it resizes your div element.
Also remove the width: 450px; from your .FeedBackclass.
Change:
.FeedBack {
margin-left: 50px;
margin-right: 50px;
border-radius: 10px;
width: 450px;
padding: 20px 10px;
border: 1px solid lightblue;
color: lightgray;
}
to:
.FeedBack {
margin-left: 50px;
margin-right: 50px;
border-radius: 10px;
padding: 20px 10px;
border: 1px solid lightblue;
color: lightgray;
}
Try this however you may have to fix few things according to the media query after applying this code
#media (max-width: 768px) {
body,html {
max-width: 100%;
min-width: 100%;
}
}
I am trying to make the telephone button responsive on mobile.
In my browser's developer tools everything seems good in every mobile screen resolution, but when I access the site from mobile the phone number is split into 2 lines, instead of making it one line in a box.
Example
html
050-475-1410
css :
* {
margin: 0;
padding: 0;
}
body {
overflow: scroll;
margin: 0;
font-size: 17px;
color: black;
line-height: 1.4;
}
#media only screen and (max-width: 2000px) {
.call {
/*Your styles on small screen - example only*/
width: 200px;
font-size: 30px;
.span{display: inline;}
}
}
#media only screen and (max-width: 600px) {
.call {
/*Your styles on small screen - example only*/
width: 150px;
font-size: 25px;
.span{display: inline;}
}
}
#media only screen and (max-width: 370px) {
.call {
/*Your styles on small screen - example only*/
width: 125px;
font-size: 20px;
.span{display: inline;}
}
}
#media only screen and (max-width: 330px) {
.call {
/*Your styles on small screen - example only*/
width: 120px;
font-size: 20px;
.span{display: inline;}
}
}
.call {
color: #2c3e50;
background: none;
border: 1px solid #2c3e50;
text-align: center ;
padding: 10px, 20px;
margin: 5px;
font-family: font1;
text-decoration: none;
position: relative;
cursor: pointer;
top: 2px;
}
HTML treats hyphen text as words, that's why they break down on small screen.
use white-space: nowrap;
also you can use these hyphen uni-codes ‑ or ‑
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.
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.