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;
}
}
Related
The aim of the code is that the background of the inner text div is of full height of the available body height (Without the need to scroll down) .
The code works for laptop screen and for ipad dimensions (In chrome developer tools) .
The problem is with cellphones . The background height doesn't reach to the bottom of the page and just instead the default height of the image .
The used 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">
<style>
/* Beginning of global variables*/
:root {
--main-color: #11cab7;
}
/* End of global variables */
/* Beginning of Global rules */
* {
box-sizing: border-box;
}
body {
font-family: 'Work Sans', sans-serif;
}
.container {
width: 600px;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/*.Small.*/
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium.*/
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* End of global rules */
/* Begin of header styling */
.header {
padding: 20px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 100px;
height: 40px;
}
.links {
position: relative;
}
.header .links .icon {
width: 30px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
cursor: pointer;
}
.header .links .icon span {
background-color: #333;
height: 2px;
margin-bottom: 5px;
}
.header .links .icon span:first-child {
width: 100%;
}
.header .links .icon span:nth-child(2) {
width: 60%;
transition: .3s linear;
}
.header .links .icon span:last-child {
width: 100%;
}
.header .links .icon:hover span:nth-child(2){
width: 100%;
}
.header .container ul {
list-style-type: none;
display: block;
position: absolute;
background-color: #f6f6f6;
min-width: 200px;
padding: 0;
right: 0;
display: none;
}
.header .container ul::before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #f6f6f6 transparent;
position: absolute;
right: 5px;
top: -20px;
}
.header .container ul li {
display: block;
padding: 15px;
transition: .2s;
}
.header .container ul li:hover {
padding-left: 25px;
}
.header .container ul li a {
text-decoration: none;
color: #333;
}
.header .container ul li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
.header .container .links:hover ul {
display: block;
transition: 0.1s;
z-index: 1;
}
/* End of header styling */
/* Beginning of landing section */
.landing {
background-image: url(https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/landing.jpg);
background-size: cover;
min-width: 620px;
height: calc(100vh - 80px);
position: relative;
}
.landing .intro-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 320px;
max-width: 100%;
}
.landing .intro-text h1 {
margin: 0;
font-size: 50px;
color: var(--main-color);
}
.landing .intro-text p {
font-size: 19px;
line-height: 1.8;
}
/* End of landing section */
</style>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#200;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- The use of the container is that our text not start from
the beginning of the webpage as it is visually not good -->
<!-- Beginning of header -->
<div class="header">
<div class="container">
<img class="logo" src="https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/logo.png" alt="logo image" >
<div class="links">
<span class="icon">
<span></span>
<span></span>
<span></span>
</span>
<ul>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
<!-- End of header -->
<!-- Beginning of sections -->
<div class="landing">
<div class="intro-text">
<h1>Hello there</h1>
<p>We are Leon - Super creative and minimal agency
Web Template
</p>
</div>
</div>
<!-- End of sections -->
</body>
</html>
I would be thankful for the solution that uses pure CSS
I think this happens because of overflowing
you need to set overflow-x on html and body hidden like:
body, html{
overflow-x: hidden;
}
this will break your navbar, but you can add this to fix it:
.header .container{
width:100%;
}
and finally, for the text remove the max-with:620px to make it more responsive.
Hope it will help you.
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 have an unordered vertical list as a navigation bar that is changing to a horizontal list on mobile devices. How do I prevent the list from switching to vertical and stay horizontal within the div element it's in.
Side note: the resulting code snippet is showing the list as vertical, but I suspect it's because the window is being perceived as mobile given it's width
Edit: there also appears to be a small scrollable gap to the right of the screen on mobile.
body {
background-color: #E5E5E5;
}
#nav_bar {
background-color: #2F2F2F;
height: 60px;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
#nav_logo {
background-image: url('../img/nav_logo.png');
width: 250px;
height: 40px;
top: 15%;
left: 10%;
position: absolute;
}
#media (max-width: 629px) {
div#nav_logo {
background-image: url('../img/nav_logo_mobile.png');
width: 60px;
height: 39px;
}
}
ul.nav {
list-style-type: none;
left: 70%;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
}
li.nav {
float: left;
}
li.nav a {
font-family: 'Roboto Condensed', sans-serif;
display: block;
color: white;
text-align: center;
padding: 18px;
text-decoration: none;
}
li.nav a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Oswald|PT+Sans" rel="stylesheet">
</head>
<body>
<div id="nav_bar">
<div id="nav_logo"></div>
<ul class="nav">
<li class="nav">HOME</li>
<li class="nav">CONTACT</li>
<li class="nav">ABOUT</li>
</ul>
</div>
</body>
</html>
I think the problem is with "left: 70%". On mobile devices the space is just not enough to keep the links in a line.
Give them more space on small screens. I would recommend to set the right value instead of left, btw. On small screens you could just set it to right: 0.
I found some code on w3schools and tried to implement it in your code. This is what I came up with:
ul.nav {
position: relative;
overflow: hidden;
background-color: #333;
}
li.nav {
float: left;
}
li.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
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
I want to hide the menu only when the screen size 320px is ... Now the menu is always hidden and I need to call them.
when the screen size 320px is, then is ok, when i need to call #main-nav, but by default size must be visible
* {
box-sizing: border-box;
}
html, body {
min-height: 100%;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
}
.main-header {
background: linear-gradient(#3F94BF, #246485);
padding: 5px;
text-align: center;
color: white;
text-shadow: #222 0px -1px 1px;
position: relative;
width: 100%;
transition: all 0.3s ease;
}
.page-wrap {
float: right;
width: 100%;
transition: width 0.3s ease;
}
nav a {
color: #fff;
display: block;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
.main-nav {
position: fixed;
width: 0;
height: 100%;
font-weight: bold;
background: linear-gradient(#3F94BF, #246485);
overflow: hidden;
transition: width 0.3s ease;
}
.content {
overflow: hidden;
padding: 20px 20px 20px 20px;
}
#close-menu {
display: none;
}
#open-menu {
display: block;
}
#main-nav:target {
width: 20%;
}
#main-nav:target + .page-wrap {
width: 80%;
.open-menu {
display: block;
}
.close-menu {
display: none;
}
.main-header {
width: 80%;
left: 20%;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 480px) {
}
html
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<nav class="main-nav" id="main-nav">
Details
Adresses
Kontakt
</nav>
<div class="page-wrap">
<header class="main-header">
☰
close
<h1>VIGOUI</h1>
</header>
<div class="content">
It’s all about playing four quarters. I think we played well but the other team played well too. They took advantage of certain circumstances that arose. It’s a physical game.
</div>
</div>
</body>
</html>
First you need the media query (http://jsfiddle.net/3X8Tq/)
#media all and (min-width: 320px) {
#main-nav {
width: 20%;
}
.page-wrap {
width: 80%;
}
}
That works great for small windows, but for large screens the close button doesn't work. This is because the close button never worked. It only works because the CSS is only applying the open :target. So lets make the close button work. We have no open-menu or close-menu ids on the page, but you do have CSS for them.
See the HREF #main-nav points to the nav. there is no #close-menu id. Lets add one.
<div id="close-menu"></div>
And we'll put it before the nav. We will also add the css for #close-menu
#close-menu:target + #main-nav {
width: 0;
}
#close-menu:target ~ .page-wrap {
width: 100%;
left: 0;
}
Solution: http://jsfiddle.net/3X8Tq/1/
Looking at your css I believe you have a misunderstanding of how it works. The subclasses in your css only work with less css library. The #close-menu and #open-menu don't exist on the page. I suggest reading up on :target and css selectors in general.