I am having an issue with my website not being responsive even though I already created the code to make it so. The images on my site don't get rearranged when I change the size of the browser.
The website is whoissaveliy.com
Below is my responsive.css file which contains the code that I created to make my site responsive. As well as my index.html file code. Please let me know what else you may need to see or know in order to help me with the issue.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Saveliy Yusufov | Working Professional</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css? family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
responsive.css
#media screen and (min-width: 480px) {
/**********************************
TWO COLUMN LAYOUT
***********************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/**********************************
PAGE: PORTFOLIO
***********************************/
#gallery li:nth-child(3+1) {
clear: left;
}
#gallery li {
background-color: orange;
width: 28.3333%;
}
}
/**********************************
ABOUT
***********************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
#media screen and (min-width: 660px) {
/**********************************
HEADER
***********************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: right;
width: 45%;
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.25em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599868;
margin-bottom: 60px;
}
}
#media screen and (min-width: 480px) {
/**********************************
TWO COLUMN LAYOUT
***********************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/**********************************
PAGE: PORTFOLIO
***********************************/
#gallery li:nth-child(3+1) {
clear: left;
}
#gallery li {
background-color: orange;
width: 28.3333%;
}
}
/**********************************
ABOUT
***********************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
#media screen and (min-width: 660px) {
/**********************************
HEADER
***********************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: right;
width: 45%;
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.25em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599868;
margin-bottom: 60px;
}
}
You need to add this media query in responsive.css itself. Use firefox and press (shift+ctrl+M) then select 480*320 and see your new styles are applying in that resolution. And also you need to add media query at the end of web page css
Related
So I was at work making a page and i put my #media rules in a responsive.css file. So it worked all fine, until i uploaded to server and the responsive.css is still being called but none of its rules are working. i also found this to be the case at home as well. Any ideas why this might be?
below is my links i used.
and the responsive.css file.
again this works at work but not anywhere else, the styles .css works fine so does my jquery scripts.
Thanks in advance
(unable to show full code for CopyR reasons)
mobilenav {
display: none;
font-size: 450%;
position: fixed;
right: 0;
top: 0;
height: 1em;
z-index: 10;
justify-content: center;
align-items: center;
align-content: center;
width: 20%;
background-color: var(--katlgreen);
}
mobilenav h1 {
background-color: transparent;
}
navmenu {
position: fixed;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
background-color: var(--katdgreen);
z-index: 9;
}
navmenu a {
margin-left: 2em;
font-size: 150%;
margin-top: 3em;
font-weight: 900;
}
/* columns and removes */
#media only screen and (max-width: 1200px) {
td {
font-size: 90%;
}
}
#media only screen and (max-width: 950px) {
column {
width: 48%;
margin-top: 1em;
}
}
#media only screen and (max-width: 450px) {
column {
width: 98%;
margin-top: 1em;
}
#estlogo {
display: none;
}
brandbuttons {
display: none;
}
nav {
display: none;
}
tab {
display: none;
}
header {
background-color: var(--katlgreen);
margin-bottom: 1em;
height: 5em;
align-content: center;
}
mobilenav {
display: flex;
}
#katlogo {
margin: auto 5%;
}
}
/* columns and removes */
#media only screen and (min-width: 951px) and (max-width: 1200px) {
nav {
width: 50%;
}
tabline {
width: 55%;
}
}
#media only screen and (min-width: 750px) and (max-width: 950px) {
.brandbutton2 {
width: 40%;
margin: 0;
}
.brandbuttons2 {
justify-content: space-around;
width: 100%;
}
#katlogo {
width: 120px;
}
#estlogo {
width: 80px;
}
nav {
width: 50%;
}
tabline {
width: 55%;
}
}
#media only screen and (min-width: 360px) and (max-width: 749px) {
* {
font-size: 98%;
}
.brandbutton2 {
width: 40%;
margin: 0;
}
.brandbuttons2 {
justify-content: space-around;
width: 100%;
}
nav {
width: 80%;
}
tabline {
width: 85%;
}
#katlogo {
width: 120px;
}
#estlogo {
width: 80px;
}
}
#media only screen and (min-width: 250px) and (max-width: 359px) {
* {
font-size: 98%;
}
#katlogo {
width: 100px;
}
}
#media only screen and (max-width: 250px) {
* {
font-size: 96%;
}
#katlogo {
width: 80px;
}
}
/* mobile change hdr tab to menu complete
/* vs device delete second logo and remove 2 buttons. complete
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="functions.css" rel="stylesheet" type="text/css">
<link href="responsive.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
perhaps use min-width instead of max-width
Best method i found to fix this soulution is adding the following meta code for mobile responsiveness.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
So I currently have a navbar that is responsive to the size of the screen built with HTML & CSS only. But I want it to stick to the container and also remain responsive to different screen sizes. Is there anyway to do this with only HTML & CSS? I have included the responsive Navbar code in this post that I would to update and make sticky.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4CAF50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
```
You need position: fixed; and an actualy position like top: 0;.
But also you could use the position: sticky; property instead to avoid overlapping content, like the other answer mentioned. Here you can see the browser support which is pretty good for position sticky, but slightly worse than fixed.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4CAF50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: fixed;
top: 0;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
You can also use position:sticky; and top:0 in your first media query to keep the navbar in place at the top, even when you scroll. This will work better than position:fixed because the content won't slide up behind the header while you are at the top.
Edit - embedded code directly.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4caf50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: sticky;
top: 0;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
I want to place an image and some text describing it.
This should be responsive, i.e. img and text should be side-by-side in large screen and top-bottom on smaller screen.
So, basically, before you tag, its exactly same as Two Divs next to each other, that then stack with responsive change
But this is not working.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="groupi">
<div id="one">
<img src="hello.jpg" style="width:10vw"/> </div>
<div id="two">Hello World</a></div>
</div>
</body>
</html>
and css:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
body {
margin:0;
font-family: Arial, Helvetica, sans-serif;
}
.groupi {
border : 2px solid #000;
overflow:hidden;
}
.gruopi div {
min-height: 200px;
padding: 10px;
}
#one {
float: left;
padding-top:4vw;
margin-left:3vw;
margin-right: 1vw;
margin-bottom: 5vw;
width: 10vw;
border-right:2px solid #000;
}
#two {
background-color: black;
overflow:hidden;
margin:1vw;
border:2vw dashed #ccc;
min-height:2vw;
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
#two{
}
}
I am very new, and some help will be deeply appreciated.
If you want your second div element (#two) to stack when your viewpoint is less than 600px wide, you can add the following to your media query:
#one {
float: none;
}
So your full media query is:
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
#one{
float: none;
}
}
I can't change h1 font-size in print preview. although every other property works, the font size doesn't work.
body{
margin: 1%;
padding:1%;
background-color: rgba(0,0,255,.2);
font-size: 100%;
min-width: 500px;
}
header, footer{
background-color:#0066FF;
padding: 1%;
margin: 1%;
}
header h1{
font-size: 3rem;
color:rgba(0,0,0,.7);;
}
section{
margin:1%;
padding:1%;
}
nav a{
display:block;
background-color: white;
border: 1px solid black;
text-align: center;
border-radius: 35px;
text-decoration: none;
padding: 2%;
margin: 1%;
}
h1{
text-align: center;
color:rgba(255,0,0,.7);;
}
.myClass{
margin: 0em 1em;
padding:.75em;
border: 1px solid black;
border-radius: .25%;
/* Safari and Chrome */
-webkit-column-count:3;
-moz-column-count: 3;
column-count:3;
}
ol{
list-style:upper-roman;
margin:1em;
}
img{
display: none;
}
footer{
clear: both;
text-align:center;
text-transform: uppercase;
}
#media screen and (min-width: 600px) {
img{
display: inline-block;
width: 20%;
margin-right: 4%;
}
section {
display: inline-block;
vertical-align: top;
}
#left {
width: 20%;
}
#center {
width : 70%;
}
#center div:last-of-type{
width: 100%;
padding:.75em;
padding-left: 0;
margin: 0em 1em;
}
h2 {
font-size: 1.7em;
}
h1::after {
content: "(I guess...)";
}
h3 {
height: 35px;
line-height: 35px;
font-size: 1.6em;
font-weight: bolder;
}
#center div p {
height: 45px;
line-height: 45px;
font-size: 1.6em;
}
header , footer {
background-color: initial;
}
footer {
width: 70%;
float: right;
}
footer p {
text-align: left;
}
}
#media print {
nav a {
display:block;
background-color: white;
border: 0;
text-align: center;
border-radius: 0;
text-decoration: none;
padding: 0;
margin: 0;
}
h1 {
font-style: italic;
font-weight: bolder;
font-size: 16px;
}
}
<!--
Create a stylesheet that will style the page
as it appears in the example. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
<link rel="stylesheet" type="text/css" href="responsive.css"/>
<meta charset = "UTF-8">
</head>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
<header>
<h1> Web Design is Awesome!!!</h1>
<nav>
University of Michigan
Intro to Web Design
</nav>
</header>
<footer>
<p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
</footer>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
</body>
</html>
Try using em, px, or a a percent value.
h1 {
font-size: 24px;
font-size: 200%;
font-size: 1.5em;
}
The percentage will depend on what the default text size is.
Usually the default size is 16px.
I was facing the same problem for H1. It turned out that for me normalize.css was overriding the font-size in the CSS file.
Try to use css for print mode:
#media print{
h1{....}
}
You can add !important in front of the h1 property value so that the browser does not override the value in print preview.