In the below two images, you can see that changing the width does not have any impact on font size and thus the **text is coming out of the sidebar.
I want the siderbar text to resize itself as the width of its parent (sidebar) decreases with respect to the body
Codes (HTML and CSS) are given below the images
HTML:-
<body>
<div class="container">
<div class="header">
<div class="header-image"><img src="images/logo.png" alt="logo"></div>
<nav>
<ul class="left-menu">
<li> Services</li>
<li>Portfolio</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="right-menu">
<li>+91 964941****</li>
<li>Get a Quote</li>
</ul>
</nav>
</div>
<div class="content-a">
<span>DEMO SESSIONS</span>
<h1>Get Demo Class Now</h1>
<p>We offer demo sessions before making you enroll in any training course.
We respect your money and our content quality will be worth every penny of yours. Have Faith :) </p>
</div>
<aside class="siderbar">
<ul>
<li>Instagram</li>
<li>Email</li>
<li>Discord</li>
</ul>
</aside>
</div>
</body>
CSS:-
body{
background-color:#191C26;
color:white;
}
/* Start of Header */
.header{
margin-top:20px;
height:100px;
margin-left:150px;
}
.header-image{
width:10%;
display: inline-block;
position:relative;
top:36px;
}
.header-image img{
width:100%;
}
.left-menu, .right-menu{
list-style: none;
font-size: 200%;
}
.left-menu a, .right-menu a{
text-decoration: none;
display: inline-block;
color:white;
}
.left-menu{
float:left;
margin:0px;
margin-left:12%;
}
.left-menu li{
float:left;
}
.left-menu a{
margin-right:20px;
}
.right-menu{
float:right;
margin:0;
}
.right-menu li{
float:left;
margin-left:10px;
}
.right-menu a{
margin-left:20px;
}
/*End of Header */
/*Start of Mid Content*/
.content-a{
width:45%;
margin:auto;
margin-top:80px;
}
.content-a h1{
font-size: 150px;
margin:0px;
}
.siderbar{
display:inline-block;
position:fixed;
top:0px;
left:0px;
height:800px;
width:10%;
background-color: black;;
}
.siderbar ul{
list-style: none;
padding:0px;
margin-top:400px;
margin-bottom:486px;
width:100%;
}
.siderbar a{
display:inline-block;
text-decoration: none;
color:inherit;
margin-bottom: 20px;
width:100%;
font-size: 200%;
}
I think this maybe will work, try this (use media query for responsive)
CSS:
.siderbar a {
display: inline-block;
text-decoration: none;
color: inherit;
margin-bottom: 20px;
width: 100%;
font-size: 1rem;
}
#media (min-width: 55rem) {
.siderbar a {
font-size: 1rem;
}
}
#media (max-width: 55rem) {
.siderbar a {
font-size: 0.7rem;
}
}
#media (max-width: 42rem) {
.siderbar a {
font-size: 0.5rem;
}
}
Instead of using pixel value use rem or em.
Eg: You wrote something like this
.content-a h1{
font-size: 150px;
margin:0px;
}
Use this instead
.content-a h1{
font-size: 9.375rem;
margin:0;
}
Note: em and rem are relative length while pixel (px) is an absolute length value
try using vw for font size like this:
font-size: 8vw;
or use media queries like this :
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
#media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
#media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Related
I have used a 12 column format. (refer the web view image) there are two divs marked in yellow and red each has a width of 50% each.
I have coded it in such a way that when the device width has reduced the width of each divs will be set to 100% so that the content in each of the div sections are placed one below the other when viewed from a mobile or any device with lesser width. But as seen in the screenshot of the mobile view(1 & 2) that is not the case. the second div has moved out of the screen.
I have not used any bootstrap. My HTML and CSS codes are as follows
/********DEFAULTS*******/
nav,header,footer
{
display:block;
}
body
{
line-height: 1;
margin :0;
}
/********NAV BAR*******/
nav
{
width:100%;
margin:0;
}
nav ul
{
background-color: #eee;
overflow: hidden;
margin:0;
padding:0;
}
ul.topnav li
{
list-style: none;
float : left;
margin:0;
padding:0;
}
ul.topnav li.topnav-right
{
float : right;
}
ul.topnav li a
{
display : block;
text-decoration : none;
min-height:16px;
text-align:centre;
padding:14px;
text-transform: uppercase;
color:#665;
}
ul.topnav li a:hover
{
background-color: #0000ff;
color:#fff;
}
ul.topnav li.dropdownicon
{
display: none;
}
.container
{
width : 100%;
margins: auto;
padding-top: 4%;
padding-bottom: 4%;
background:
}
/********custom style*******/
#section-1-gradient
{
background:#076DFF;
background-image: -webkit-linear-gradient(#076DFF, #65A5FF);
background-image: -o-linear-gradient(#076DFF, #65A5FF);
background-image: -moz-linear-gradient(#076DFF, #65A5FF);
background-image: linear-gradient(#076DFF, #65A5FF);
}
h1.large
{
color:#fff;
font-size: 56px;
margin:0;
line-height: 70px;
}
div.leftside-col
{
margin-left:30%;
}
div.rightside-col
{
margin-left:15%;
}
input[type="text"]
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
}
input[type="password"] /* added by shamil*/
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
}
form h2
{
color:white;
}
.row
{
width:100%;
display:flex;
flex:wrap;
align-items:center;
}
.row::after
{
display:table;
clear: both;
content:"";
}
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}
/********MOBILE*******/
#media screen and (max-width : 680px)
{
ul.topnav li:not(:nth-child(1))
{
display: none;
}
ul.topnav li.dropdownicon
{
display:block;
float: right;
}
ul.topnav.responsive li.dropdownicon{
position: absolute;
top:0;
right:0;
}
ul.topnav.responsive{
position: relative;
}
ul.topnav.responsive li{
display:inline;
float : none;
}
ul.topnav.responsive li a
{
display: block;
text-align: left;
text-transform: uppercase;
}
.col-6
{
width:100%;
margin:0;
}
div.rightside-col,
div.leftside-col
{
width:15%;
}
}
<! DOCTYPE html>
<html>
<head>
<title>
Anime Shop
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav" id="dropdownClick">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign up</li>
<li class="topnav-right">Sign in</li>
<li class="dropdownicon">☰</li>
</ul>
</nav>
<div class="container" id="section-1-gradient">
<div class="row">
<div class= "col-6">
<div class= "leftside-col">
<h1 class="large">
Crazy radness
</h1>
<h1 class="large">
Made for Otaku
</h1>
<form>
<div class= "leftside-col">
<h2>Username</h2>
<input class="inputbox" type="text" name="Username "placeholder="Username">
<h2>Password</h2>
<input class="inputbox" type="password" name="Password "placeholder="Password">
</div>
</form>
</div>
</div>
<div class= "col-6">
<div class= "rightside-col">
<iframe width="560" height="315" src="https://www.youtube.com/embed/uC_SgMzlr6U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script>
function dropdownMenu()
{
var x= document.getElementById("dropdownClick");
if(x.className === "topnav")
{
x.className = "topnav responsive";
/*change topnav to topnav.responsive*/
}
else
{
x.className = "topnav";
}
}
</script>
</body>
</html>
Can someone please point out where I am going wrong?
you can add below code to your media query
.row {
flex-direction: column;
}
then just fix your margin and paddings
what I found is its taking 50% of the size even when it is in a smaller size and as there will be a minimum width so it is overflowing to the left try to make it reactive
The situation is: I'm learning on my own how to make websites. I already know some stuff and now I decided to create one website.
But I have some struggle... I'm trying to make it responsive, ant it kinda works, but footer overlaps content in body when you resize the page...
The idea is to scroll down for the tags when they start to overlap..
I've googled for similar issue and checked threads, tried a lot of things, but still got nowhere :|
Help?...
body{
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/
.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}
/*+++TAGS*/
.tags {
position: fixed;
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/
.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}
#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name"viewport" content="width=device-width, initial scale=1">
<meta charset="utf-8">
<link rel="shortcut icon" href="/images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="/arturnmk/style.css">
</head>
<body>
<div class="main">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>WutWut</li>
</ul>
</li>
<li>Menu</li>
</ul>
</nav>
<div class="homecontainer">
<div class="hometitle">
<span>
<h1>Firtname Lastname</h1>
</span>
<span>
<h2>Thing to say/state</h2>
</span>
</div>
</div>
</div>
</body>
<footer>
<div class="tags">
<div class="item">TagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTag</div>
<div class="item">Tag</div>
<div class="item">TagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTagTag</div>
<div class="item">TagTag</div>
<div class="item">TagTag</div>
<div class="item">PTagTagTag</div>
<div class="item">TagTagTagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">Tag16 Tag16 Tag16Tag16</div>
<div class="item">Tag15Tag15</div>
<div class="item">Tag14Tag14Tag14</div>
<div class="item">Tag13</div>
<div class="item">Tag12</div>
<div class="item">Tag11</div>
<div class="item">Tag10</div>
<div class="item">Tag9</div>
<div class="item">Tag8</div>
<div class="item">Tag7</div>
<div class="item">Tag6</div>
<div class="item">Tag5</div>
<div class="item">Tag4</div>
<div class="item">Tag3</div>
<div class="item">Tag2</div>
<div class="item">Tag1</div>
</div>
</footer>
</html>
To achieve responsive web design, use CSS3 media queries
Issue for overlap is due to min-height of homecontainer class and fixed position for tags class
Please check the below option using CSS3 media queries
https://codepen.io/nagasai/pen/vJbqeE
CSS:
html{
height:100%;
}
body{
height:100%;
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/
.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}
/*+++TAGS*/
.tags {
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/
.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}
#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;
}
#media only screen and (max-width: 550px) {
.homecontainer {
width: 100%;
height: 20%;
min-height: 100px;
}
footer{
position: absolute;
top: 400px;
width: 100%;
height: 20%;
}
}
1) You shouldn't have HTML code outside of the <body> tag for elements that are meant to be displayed on the page. Your footer should be contained inside the <body> tag. You can create a <div> to contain the elements which you now have in the body of the document.
2) To avoid the overlapping (considering that you want to keep your existing code structure and CSS) you can set a margin-bottom equal to the height of your footer to the container of your main content. This approach will work if your footer always has the same height.
3) If your footer needs to change in height, another simple solution (but with drawbacks) is to let the footer stick to the normal page flow, instead of absolutely positioning it to the bottom of the document, and to set a min-height to the container of your main content. The min-height should be set to ensure that your footer won't be positioned in the middle of the user's screen on pages that are short (that don't have a lot of content in them). The min-height on the main content's container will in this case create whitespace below the main content that will push the footer down.
I may be mistaken, but is the only issue you have the footer getting in the way?
If I want the footer to stay at the bottom of the screen, I usually do as follows:
#footer{
position: absolute;
top: 100%;
height: however high you want it to be;
transform: translateY(-100%) ;
}
That pushes the footer all the way off your screen on the bottom, but the transform: translate pulls it back up exactly the height of the footer.
I've been working on a site that I've been using ems and % in as I want to make it responsive. It's my first time attempting this.
I had the same site working using px.
I'm having this issue where content in the header and footer is not re-sizing properly. The content moves down past their containers or overlaps other content.
I.e. say in my footer i have the parent content set to 100% width and then the children divs set to various percentages of it.
The children then move down out of their containers and even the footer itself when I re-size.
Here's My JsFiddle
In my code here I've just put the footer code as it will just look messy if I put it all
<footer class="site-footer">
<div class="leftfoot">
<div class="footercontent">
<div class="logocopyright">
Tali.Zorah 2015 ©
</div>
</div>
</div>
<div class="rightfoot">
<div class="legal">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>LEGAL NOTICE</li>
<li>PRIVACY POLICY</li>
</ul>
</div>
<div class="social">
<ul class="socicons">
<li>
<a class="facebook" href="https://www.facebook.com"> <img src="http://placehold.it/350x150"></a>
</li>
<li>
<a class="twitter" href="https://www.twitter.com"><img src="http://placehold.it/350x150"></a>
</li>
<li>
<a class="instagram" href="https://www.instagram.com"><img src="http://placehold.it/350x150"></a>
</li>
</ul>
</div>
</div>
</footer>
And the footer CSS:
.footercontent{
position:absolute;
min-width:100%;
max-width:100%;
}
.logofooter{
float:left;
margin-left:2%;
min-width: 10%;
max-width: 10%;
min-height:100%;
}
.mysitefooter-logo {
min-height: 100%;
min-width:10%;
max-width:100%;
margin-top: -1%;
margin-right:1%;
}
.logocopyright{
float:left;
margin-top:5%;
margin-left:2%;
min-width:100%;
padding-top:1%;
}
.leftfooter{
min-width:10%;
max-width:15%;
float:left;
}
.rightfooter{
min-width:85%;
max-width:90%;
float:right;
}
.logocopyright a {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size:.6em;
}
.logocopyright a:hover{
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal{
background-color:#009;
min-width:70%;
max-width:80%;
float:left;
}
.legal a:hover {
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal ul li {
display:inline-block;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-size:.8em;
margin-left:8%;
min-width:10%;
max-width:100%;
}
.legal ul > :first-child {
margin-left:5%;
}
.legal a {
font-size:1em;
color:#FFF;
}
.social{
min-width:15%;
max-width:20%;
float:right;
margin-top: -4%;
color:#000000;
}
.social li {
display:inline-block;
}
.socicons{
min-width:80%;
max-width:100%;
}
.socicons li{
display:inline;
}
.facebook{
min-width:8%;
max-width:10%;
}
.facebook img
{
min-width:8%;
max-width:20%;
}
.twitter{
min-width:8%;
max-width:10%;
}
.twitter img
{
min-width:8%;
max-width:20%;
}
.instagram{
min-width:8%;
max-width:10%;
}
.instagram img
{
min-width:8%;
max-width:20%;
}
If you want a responsive site absolute positioning is not a good idea. Just use a width of 100% and try using viewport(vw) width instead of ems.
maybe I fixed a little. I updated:
'id' into footer tag.
little jscript.
here's my js code:
var footer = document.getElementById("guestAttempt");
footer.setAttribute("float","left");
footer.setAttribute("margin-left","3em");
footer.setAttribute("margin-bottom","0em");
https://jsfiddle.net/unt5zbL8/6/embedded/result/
I'm doing a project on recreating the Google homepage with html and css. I am for the most part finished with the project, but I've noticed a few quirks that are irritating me. I've spent a great deal of time on each of these quirks, but can't get things to way I want them to look. These are the following quirks:
The icon in the top right-hand corner isn't inline with the rest of the text.
For some reason I can't center the buttons properly.
Not sure how to handle the white space surrounding the grey footer.
JSFiddle of The Code
If you have any input on any of the above issues, I would forever be thankful!
<body>
<div id="wrapper">
<div id="header">
<ul class="navbar">
<li class="navli"> +You
</li>
<li class="navli">Gmail
</li>
<li class="navli">Images
</li>
<li class="navli" id="icon">
<img src="http://bit.ly/1NHEwTW" height="auto" width="30" />
</li>
<li class="navli">theonlybrianlie#gmail.com
</li>
</ul>
</div>
<div id="body">
<div class="logo">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="searchbar">
<input type="text" id="search1" />
</div>
<div id="buttons">
<input class="button" id="googlesearch" value="Google Search" type="submit">
<input class="button" id="secondbutton" value="I'm Feeling Lucky" type="submit">
</div>
</div>
<div id="footer">
<div id="leftfoot">
<ul>
<li class="lf"> Advertising
</li>
<li class="lf"> Business
</li>
<li class="lf"> About
</li>
</ul>
</div>
<div id="rightfoot">
<ul>
<li class="rf"> Privacy
</li>
<li class="rf"> Terms
</li>
<li class="rf"> Settings
</li>
</ul>
</div>
</div>
</div>
.button {
font-family:Arial;
font-size:11px;
font-weight:bold;
display:inline;
height:30px;
border:1px solid #dcdcdc;
background:#f2f2f2;
padding-left: 10px;
}
body, html {
height:100%
}
#wrapper {
min-height:100%;
position: relative;
padding:0;
margin:0;
}
.logo img {
display:block;
width: 269px;
height:95px;
margin:auto;
margin-top: 80px;
padding-top: 112px;
}
#header {
width:100%;
height:100px;
/*background-color:green*/
;
}
.navbar {
/*background-color: red;*/
float: right;
}
.navli {
display: inline-block;
font-family: Arial;
}
.navli a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
}
.navli a:hover {
text-decoration:underline;
}
#icon {
margin-top:10px;
padding-left:15px;
bottom:0;
position:relative;
}
.searchbar {
width:400px;
height:28px;
margin: auto;
display:block;
/*background-color:red;*/
padding-top:10px;
}
#search1 {
width:400px;
height:28px;
margin: auto;
}
#buttons {
display:block;
/*background-color:blue;*/
height: 22px;
width:250px;
margin: auto;
margin-top: 10px;
}
#footer {
position: absolute;
bottom:0;
height:60px;
width:100%;
background-color:#f2f2f2;
clear:both;
display:block;
border-top: 1px solid #e4e4e4;
}
#leftfoot {
width:300px;
left:0;
/*background-color:blue;*/
display: inline-block;
}
.lf {
display: inline-block;
}
.lf a {
text-decoration:none;
color: #404040;
font-size: 13px;
font-family: Arial;
padding-left: 15px;
}
.lf a:hover {
text-decoration: underline;
}
#rightfoot {
width:250px;
float:right;
/*background-color:blue;*/
padding:0;
margin:0;
}
.rf {
display: inline-block;
margin:auto;
}
.rf a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
font-family: Arial;
}
.rf a:hover {
text-decoration: underline;
}
For your top right icon not inline with the rest of the menu, i would alter the CSS like this
.navli {
display: inline-block;
font-family: Arial;
float: left;
height: 30px;
line-height: 30px;
}
#icon {
/* margin-top: 10px; */
padding-left: 15px;
/* bottom: 0; */
/* position: relative; */
}
For your buttons not centering:
Add text-align:center; to #buttons
And for the white space on footer:
There's a margin on your body, so change your body,html to this:
body, html {
height: 100%;
margin: 0;
}
UPDATE
Here's the JSFiddle - Full Screen Preview - JSFiddle View
I'll try to answer these as concisely as possible:
1- the heading is inline, and your icon is taller than the rest of the inline elements. play with the margin and padding for your text elements there.
2- place your buttons in a div or section element of their own, and use text-align: center to center them on the page
3- add a class="container-fluid" to your footer element.
I have a site header created with floating divs using this structure:
nav {
height:inherit;
width:100%;
margin:0 auto;
position:relative;
z-index:10;
text-align: center;
}
#nav-wrap {
min-width: 100%;
width: auto !important;
width:100%;
white-space:nowrap;
}
nav ul#nav-left, #nav-right {
list-style-type:none;
display:inline-block;
margin:0;
padding:0;
width:auto;
height:100%;
}
nav img {
display:inline-block;
padding:0;
margin:0;
max-height:225px;
vertical-align:top;
}
nav ul li {
display:inline-block;
text-align:center;
font-family: 'Oswald',helvetica,arial,sans-serif;
font-size:1.8rem;
font-weight:400;
padding:0 30px;
margin-top:30px;
}
<nav>
<div id="nav-wrap">
<ul id="nav-left">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
<img src="assets/img/img.png" />
<ul id="nav-right">
<li>Option4</li>
<li>Option5</li>
<li>Option6
</li>
</ul>
</nav>
Updated
I've been playing with layout and the floats were making things tough. So, it's all displayed as inline-block without floats, but the center logo still isn't resizing and I can't figure out what I'm doing wrong. Take a look at the staged site linked below to see what I'm going for. The logo overlap is intentional.
Staged site
I appreciate any help or suggestions. I'd like to avoid using display:table if possible.
#media queries is the thing you needed.
#media (max-width: 700px) {
nav ul li {
font-size:1.3rem;
padding:0 10px;
}
}
#media (max-width: 1200px) {
nav ul li {
font-size:1.5rem;
padding:0 20px;
}
}
#media (min-width: 1201px) {
nav ul li {
font-size:1.8rem;
padding:0 30px;
}
}
#media (max-width: 400px) {
nav ul li {
/*For this you need to use mobile friendly menu **/
}
}