CSS source code to make my site mobile friendly. The one I have doesn't work well with all my sites content
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left, header .float-right {
float: none;
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
}
/* login */
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
#login ul {
margin: 5px 0;
padding: 0;
}
#login li {
display: inline;
list-style: none;
margin: 0;
padding: 1px;
}
#login a {
background: none;
color: #999;
font-weight: 600;
margin: 2px;
padding: 0;
}
#login a:hover {
color: #333;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
/* main layout
----------------------------------------------------------*/
.main-content, .featured + .main-content {
background-position: 10px 0;
}
.content-wrapper {
padding-right: 10px;
padding-left: 10px;
}
.featured .content-wrapper {
padding: 10px;
}
/* page content */
article, aside {
float: none;
width: 100%;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
padding-left: 10px;
margin: 25px 0;
}
ol.round li.zero, ol.round li.one, ol.round li.two, ol.round li.three, ol.round li.four, ol.round li.five, ol.round li.six, ol.round li.seven, ol.round li.eight, ol.round li.nine {
background: none;
}
/* features */
section.feature {
float: none;
padding: 10px;
width: auto;
}
section.feature img {
color: #999;
content: attr(alt);
font-size: 1.5em;
font-weight: 600;
}
/* forms */
input {
width: 90%;
}
/* login page */
#loginForm {
border-right: none;
float: none;
width: auto;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 0;
float: none;
width: auto;
}
/* footer
----------------------------------------------------------*/
footer .float-left, footer .float-right {
float: none;
}
footer {
text-align: center;
height: auto;
padding: 10px 0;
}
footer p {
margin: 0;
}
#search {
width: auto;
}
#main{
width: auto;
}
}
HTML Code
<body style="background-color: #e2e2e2" >
Am specifically having issues with the "Search" and "main" classes. They don't adjust very well to the width of the mobile view
<label for="name">   Looking For Something?</label>
<input type="text" id="search" name="search" value="#search" /> 
<input type="submit" value="Go" />
</form>
</div>
<p> </p>
#foreach(var info in data)
{
var name= #info.Name;
<div class="main">
<div class="proimage">
<img src="#info.ProImage" height="100px" width="100px" alt="image">
</div>
<ul class="contact">    #name</ul>
<ul class="contact">     Posted:#info.Date</ul>
<p>   </p>
<ul class="description">  </ul>
<ul class="description">#info.Description</ul>
<div class="itemimage">
<img src="#info.ItemImage" height="300px" width="390px"
alt="image"> 
</div>
</div>
}
simply use like this
#media (min-width: 850px) {
footer .float-left, footer .float-right {
float: none;
}
...
}
For Specific width you can use like this way
#media screen and (max-width: 580px) {
footer .float-left, footer .float-right {
....
}
}
For Specific width in between
#media screen and (min-width: 500px) and (max-width: 674px) {
footer .float-left, footer .float-right {
....
}
}
Related
I am trying to center my logo and search bar within my blue header. In my site I am using a section with a width of 1200px and inside the header there is also a "headersection" that is 1200px. I want the logo on the left side of this section and the searchbar in the middle. How can I accomplish this?
Live codepen: https://codepen.io/PHV/pen/dyvXGaa
My HTML:
<div class="usp-banner" role="complementary">
<ul class="uspBannerList">
<li class="uspBannerList">Vind de leukste en goedkoopste bordspellen op Spelplaats.com</li>
<li class="uspBannerList">Vergelijk prijzen bij verschillende aanbieders</li>
</ul>
</div>
<div class="header">
<div class="headersection">
<div class="logo">
<img src="img/Spelplaats-Logo-F.png" alt="Spelplaats.com" class="logo">
</div>
<script src="js/searchfunction.js"></script>
<div class="search">
<form action="search.html" method="get">
<label for="search" class="search"></label>
<input type="text" class="searchTerm" placeholder="Zoek spel" name="search">
</form>
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="topnav" id="myTopnav">
Strategie
Fantasy
Deductieve
Cooperatief
Familie
Kinder
Kaartspellen
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
My CSS:
html {
color: #ffffff;
font-size: 1em;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
/* No padding on the site*/
*,html,body,div,dl,dt,dd,ul,ol,li,h2,h3,h5,h6,pre,form,label,fieldset,input,blockquote,th,td {
margin: 0;
padding: 0;
}
article,aside,figure,footer,header,hgroup,nav,section {
display: block;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Site background */
body {
background: #ffffff;
color: #374147;
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.4;
margin: auto;
}
h2{
font: 16px "Open Sans",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-top: 3px;
margin-bottom: 5px;
}
h3 {
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-top: 3px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #eff7fa;
overflow: hidden;
text-align: center;
}
/* Style the links inside the navigation bar */
.topnav a {
display: inline-block;
color: #374147;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: rgb(0, 51, 109);
color: white;
}
.topnav input[type=text] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Styling of the section */
section{
max-width: 1200px;
min-height: 1000px;
margin-left: auto;
margin-right: auto;
}
.headersection{
max-width: 1200px;
max-height: 96px;
margin-left: auto;
margin-right: auto;
}
/* Styling of complementary banner */
.usp-banner {
display: block;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 3px;
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
line-height: 1.5rem;
color: #374147;
background: #fff;
height: 30px;
}
#media screen and (max-width: 600px) {
.usp-banner{
display: none;
}
}
#media screen and (max-width: 768px) {
.usp-banner{
display: none;
}
}
.uspBannerList ul{
margin-left: 0;
padding-left: 0;
}
.uspBannerList li{
list-style-type: none;
margin-right: 2.5%;
margin-left: 2.5%;
width: 45%;
float: left;
height: auto;
}
/*Styling of searchbar */
.search {
width: 35%;
position: relative;
display: flex;
left: 12%;
margin: auto;
}
#media screen and (max-width: 600px) {
.search{
width: 50%;
}
}
#media screen and (max-width: 768px) {
.search{
width: 60%;
}
}
.searchTerm {
width: 300px;
border: 3px solid #fff;
border-right: none;
padding: 5px;
height: 36px;
border-radius: 5px 0 0 5px;
outline: none;
color: #374147;
}
#media screen and (max-width: 600px) {
.searchTerm{
width: 100px;
}
}
.searchTerm:focus{
color: #374147;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #fff;
background: #57bdfc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Styling of the header */
.header {
padding: 35px;
text-align: center;
background: #57bdfc;
color: white;
}
.logo {
height: 96px;
float: left;
position: relative;
}
#media screen and (max-width: 600px) {
.logo{
margin-left: 5px;
}
}
#media screen and (max-width: 768px) {
.logo{
margin-left: 5px;
}
}
Update these css
.headersection {
max-width: 1200px;
max-height: 96px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.search {
display: flex;
}
if you want to have padding for the header and the height of .headersection be limit
you should set position absolute for .logo as below:
.logo { position: absolute; top: 0; bottom: 0; margin: auto}
and set position relative for .header.
but this is not good practice.
you can easily use this code for better result :
.header {
display: flex;
align-items: center;
}
remove .headersection because there is no need
this might be helpful
.logo {
height: 96px;
float: left;
position: relative;
margin-top: -15px; <--- adjust according to your need..
}
When I open the Chrome Dev Tools and view my web page at different sizes, white space appears on the sides/bottom of the page. When I refresh the page, this extra space goes away.
This also happens when I change the size of the browser as well. The nav and the main stay in place, but the footer moves up from the bottom. Creating empty space.
Is this normal or am I doing something wrong w/ the CSS? Is there something I can do to make sure that all elements stay at their positions no matter what shape the browser changes to?
/* 1440p */
#media only screen and (max-width: 2560px), screen and (max-height: 1440px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 775px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 775px; /* changes */
padding: 18.05% 0%; /* changes */
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 150px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 775px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* 1080p */
#media only screen and (max-width: 1920px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 775px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 775px; /* changes */
padding: 14.71% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 150px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 775px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* iPad Pro */
#media only screen and (max-width: 1024px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 775px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 775px; /* changes */
padding: 49% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 150px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 775px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* iPad */
#media only screen and (max-width: 768px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 545px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 545px; /* changes */
padding: 44.6% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 106px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 545px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* Surface Duo */
#media only screen and (max-width: 450px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 345px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 345px; /* changes */
padding: 32% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 67px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 345px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center; /* changes */
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline; /* added */
padding: 0px 8px; /* added */
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* Pixel 2, Pixel 2 XL, iPhone 6/7/8 Plus */
#media only screen and (max-width: 414px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 245px;
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 245px;
padding: 32.2% 0%; /* changes */
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 47px;
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 245px;
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 15px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #1e242c;
margin: 0 auto;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: block;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* Galaxy Fold, iPhone 5/SE, Moto G4, Galaxy S5, iPhone 6/7/8, iPhone X */
#media only screen and (max-width: 375px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 245px;
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 245px;
padding: 32.4% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 47px;
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 245px;
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 15px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #1e242c;
margin: 0 auto;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: block;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title.com</title>
<link href="css/stylesheet.css" rel="stylesheet">
</head>
<body>
<!-- nav section -->
<nav id="nav">
<div id="nav-container">
<!-- nav links -->
<ul id="nav-links">
<li>
Sign Up |
</li>
<li>
Log In
</li>
</ul>
</div>
</nav>
<!-- main section -->
<main>
<div id="main-container">
<!-- main row 1 -->
<div>
<h1 id="logo">BIG TITLE</h1>
</div>
<!-- main row 2 -->
<div>
<input type="search" placeholder="Search">
</div>
</div>
</main>
<!-- sub footer 1 section -->
<section id="pre-footer-1">
<div class="footer-container">
<!-- browse the dicitionary links -->
<ul id="pre-footer-1-links">
<li>
Browse the Dictionary:
</li>
<li>
a |
</li>
<li>
b |
</li>
<li>
c |
</li>
<li>
d |
</li>
<li>
e |
</li>
<li>
f |
</li>
<li>
g |
</li>
<li>
h |
</li>
<li>
i |
</li>
<li>
j |
</li>
<li>
k |
</li>
<li>
l |
</li>
<li>
m |
</li>
<li>
n |
</li>
<li>
o |
</li>
<li>
p |
</li>
<li>
q |
</li>
<li>
r |
</li>
<li>
s |
</li>
<li>
t |
</li>
<li>
u |
</li>
<li>
v |
</li>
<li>
w |
</li>
<li>
x |
</li>
<li>
y |
</li>
<li>
z
</li>
</ul>
</div>
</section>
<!-- (4) pre-footer 2 section -->
<section id="pre-footer-2">
<div class="footer-container">
<!-- footer row 2 -->
<div>
<ul id="pre-footer-2-links">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Disclaimer
</li>
</ul>
</div>
</div>
</section>
<!-- (5) footer section -->
<footer>
<div class="footer-container">
<p id="copyright">© 2020 copyright</p>
</div>
</footer>
<!-- links to the js code -->
<script src="js/script.js"></script>
</body>
</html>
I see you have margin:0; for body the extra space shouldn't be added.
But try this:
* { margin: 0; height: 100vh;}
i dont know why my button dont show the menu when clicked ;
i try almost everything i know, but i cant define my problem.
i use the "checkbox" trick to show the hamburger button when the site go under 500 px to show a resposive menu but i dont know w
i searched on google and youtube mìbut nothing i can help me put
HTML
<header>
<ul>
<!-- ho aggiunto checkbox,toggle(bottone menu, id carrellore(carrello che compare con la mediaquery -->
<input type="checkbox" id="toggle"/>
<p id="carrellore"><img src="./images/carrello.png"></p>
<label for="toggle">☰</label>
<!-- ho aggiunto checkbox,toggle(bottone menu, id carrellore(carrello che compare con la mediaquery -->
<li>HOME<li>
<li>CATALOGO<li>
<% if ((session.getAttribute("login_result")!=null) && ((Boolean)(session.getAttribute("login_result")))) {%>
<li>PROFILO<li>
<%} else { %>
LOGIN<li>
<%} %>
<li id="carrello"><img src="./images/carrello.png"></li>
</ul>
<div id="spazio">Spazio libero<br><br></div>
</header>
CSS
header ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
header li {
float: left;
}
header li a {
display: block;
text-decoration: none;
color: white;
padding: 15px 15px;
font-family: "Lato", sans-serif;
}
header li a:hover {
background-color: #0080ff;
}
label {
margin: 0 40px 0 0;
font-size: 30px;
line-height: 70px;
display: none;
width: 14px;
float: center;
color: #ffffff;
}
#toggle {
display:none;
}
#carrello {
float: right;
}
#carrello img {
height: 18px;
width: auto;
object-fit: contain;
}
#carrellore {
float:right;
display:none;
}
#carrellore img {
height: 30px;
width: auto;
object-fit: contain;
}
#spazio {
margin-top: 25px;
visibility: hidden;
}
#logo {
display: block;
margin: auto;
}
/* mediaquery per rendere il sito responsive */
#media only screen and (max-width: 500px) {
#spazio {
margin-top: 50px;
visibility: hidden;
}
#carrellore {
display: block;
cursor: pointer;
}
label {
display: block;
cursor: pointer;
float: center;
}
header li {
background-color: #000000;
color: white;
text-align: center;
width: 100%;
display: none;
}
header li a {
background-color: #000000;
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + header li a {
display:block ;
}
“I’m setting up a new server, and want to support UTF-8 fully in my web application. Where do I need to set the encoding/charsets?”
}
the button dont trigger at all but the checkbox check
Try this code..
HTML
<header>
<ul>
<input type="checkbox" id="toggle"/>
<p id="carrellore"><img src="./images/carrello.png"></p>
<label for="toggle">☰</label>
<ul class="menu">
<li>HOME<li>
<li>CATALOGO<li>
<% if ((session.getAttribute("login_result")!=null) && ((Boolean)(session.getAttribute("login_result")))) {%>
<li>PROFILO<li>
<%} else { %>
LOGIN<li>
<%} %>
<li id="carrello"><img src="./images/carrello.png"></li>
</ul>
<div id="spazio">Spazio libero<br><br></div>
</header>
**CSS**
header ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
header li {
float: left;
}
header li a {
display: block;
text-decoration: none;
color: white;
padding: 15px 15px;
font-family: "Lato", sans-serif;
}
header li a:hover {
background-color: #0080ff;
}
label {
margin: 0 40px 0 0;
font-size: 30px;
line-height: 70px;
display: none;
width: 14px;
float: center;
color: #ffffff;
}
#toggle {
display:none;
}
#carrello {
float: right;
}
#carrello img {
height: 18px;
width: auto;
object-fit: contain;
}
#carrellore {
float:right;
display:none;
}
#carrellore img {
height: 30px;
width: auto;
object-fit: contain;
}
header {
padding-top: 66px;
}
body {
margin: 0px;
}
#logo {
display: block;
margin: auto;
}
/* mediaquery per rendere il sito responsive */
#media only screen and (max-width: 500px) {
#spazio {
margin-top: 50px;
visibility: hidden;
}
#carrellore {
display: block;
cursor: pointer;
}
label {
display: block;
cursor: pointer;
float: center;
}
header ul.menu {
display: none;
}
header li {
background-color: #000000;
color: white;
text-align: center;
width: 100%;
}
header li a {
background-color: #000000;
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + header li a {
display:block ;
}
}
JQUERY
<script type="text/javascript">
$('body').on('click','label',function() {
$('.menu').slideToggle();
});
</script>
I have had issues with modify a navigation bar for mobile. I want the navigation bar to ignore its parent div inner-wrapper width of 80% and use a full width of 100%.
The most logical solution I can think of is to set header: relative, width: 100% and header li to absolute with a width of 100%. However, this doesn't seem to work.
I want each navigation to have a full width of the screen rather than a full width of its parent wrapper.
.header {
background-color: #FFB6C1;
color: black;
overflow: hidden;
position: relative;
}
.inner-wrapper {
width: 80%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
}
.header h2 {
float: left;
font-family: 'Pacifico', sans-serif;
font-size: 30px;
}
.header h3 {
padding-top: 5px;
font-family: 'Petit Formal Script';
clear: both;
font-weight: 700;
}
.header span {
font-weight: bolder;
}
.header ul {
float: right;
margin-right: 10%
}
.header ul li {
list-style: none;
display: inline-block;
font-family: 'Podkova', sans-serif;
margin-right: 20px;
font-weight: bold;
}
/* Navigation Menu click for mobile */
.mobile-menu {
padding: 0;
margin: 0;
display: none;
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 414px) {
/* Styles */
/* Display flex to change the ordering of HTML elemtns*/
.inner-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 0px;
}
.header-title {
order: 1;
}
.header-description {
order: 2;
}
.dropdown {
order: 3;
}
.header-li {
display: none;
position: absolute;
width: 100%;
}
.header ul {
float: none;
margin-right: 0%;
}
.mobile-menu {
padding: 0;
margin: 0;
display: initial;
cursor: pointer;
}
.header ul li {
width: 100%;
background-color: green;
padding-top: 20px;
}
.header {
position: relative;
width: 100%;
}
}
<!-- Header and Navigation -->
<div class="header">
<div class="inner-wrapper">
<h2 class="header-title">text</h2>
<div class="dropdown">
<div class="mobile-menu">
<p align="right">Menu</p>
</div>
<ul class="header-li">
<li>About me</li>
<li>Progress</li>
<li>Food</li>
<li>Contact</li>
</ul>
</div>
<h3 class="header-description">text</span></h3>
</div>
</div>
If you want the navigation to have full width of the screen use width: 100vw; on the child. That means 100% of the view width
Using viewport units seems initially like a good idea, though in this case it is not necessary and will be of no use as the header uses overflow: hidden.
Note, if you start using 100vw it can cause unwanted scrollbar and/or make the element behave in an unwanted way when its parent/body has scrollbar
As the header-li relates to the header (closest ancestor having a position other than static), simply use 100% and transform: translate to position it.
.header-li {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
background: lime;
}
Note, it below sample I colored it light gray so one see how it positions itself
Stack snippet
.header {
background-color: #FFB6C1;
color: black;
overflow: hidden;
position: relative;
}
.inner-wrapper {
width: 80%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
}
.header h2 {
float: left;
font-family: 'Pacifico', sans-serif;
font-size: 30px;
}
.header h3 {
padding-top: 5px;
font-family: 'Petit Formal Script';
clear: both;
font-weight: 700;
}
.header span {
font-weight: bolder;
}
.header ul {
float: right;
margin-right: 10%
}
.header ul li {
list-style: none;
display: inline-block;
font-family: 'Podkova', sans-serif;
margin-right: 20px;
font-weight: bold;
}
.header-li {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
background: lightgray;
}
/* Navigation Menu click for mobile */
.mobile-menu {
padding: 0;
margin: 0;
display: none;
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 414px) {
/* Styles */
/* Display flex to change the ordering of HTML elemtns*/
.inner-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 0px;
}
.header-title {
order: 1;
}
.header-description {
order: 2;
}
.dropdown {
order: 3;
}
.header-li {
display: none;
position: absolute;
width: 100%;
}
.header ul {
float: none;
margin-right: 0%;
}
.mobile-menu {
padding: 0;
margin: 0;
display: initial;
cursor: pointer;
}
.header ul li {
width: 100%;
background-color: green;
padding-top: 20px;
}
.header {
position: relative;
width: 100%;
}
}
<!-- Header and Navigation -->
<div class="header">
<div class="inner-wrapper">
<h2 class="header-title">text</h2>
<div class="dropdown">
<div class="mobile-menu">
<p align="right">Menu</p>
</div>
<ul class="header-li">
<li>About me</li>
<li>Progress</li>
<li>Food</li>
<li>Contact</li>
</ul>
</div>
<h3 class="header-description"><span>text</span></h3>
</div>
</div>
If you want the header-li to expand beyond the header as well, you will need to both remove overflow: hidden, use 100vw and remove the padding the ul has as a default (or else you'll get a scroll)
.header {
background-color: #FFB6C1;
color: black;
position: relative;
}
.inner-wrapper {
width: 80%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
}
.header h2 {
float: left;
font-family: 'Pacifico', sans-serif;
font-size: 30px;
}
.header h3 {
padding-top: 5px;
font-family: 'Petit Formal Script';
clear: both;
font-weight: 700;
}
.header span {
font-weight: bolder;
}
.header ul {
float: right;
margin-right: 10%
}
.header ul li {
list-style: none;
display: inline-block;
font-family: 'Podkova', sans-serif;
margin-right: 20px;
font-weight: bold;
}
.header-li {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: lightgray;
padding: 0;
}
/* Navigation Menu click for mobile */
.mobile-menu {
padding: 0;
margin: 0;
display: none;
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 414px) {
/* Styles */
/* Display flex to change the ordering of HTML elemtns*/
.inner-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 0px;
}
.header-title {
order: 1;
}
.header-description {
order: 2;
}
.dropdown {
order: 3;
}
.header-li {
display: none;
position: absolute;
width: 100%;
}
.header ul {
float: none;
margin-right: 0%;
}
.mobile-menu {
padding: 0;
margin: 0;
display: initial;
cursor: pointer;
}
.header ul li {
width: 100%;
background-color: green;
padding-top: 20px;
}
.header {
position: relative;
width: 100%;
}
}
<!-- Header and Navigation -->
<div class="header">
<div class="inner-wrapper">
<h2 class="header-title">text</h2>
<div class="dropdown">
<div class="mobile-menu">
<p align="right">Menu</p>
</div>
<ul class="header-li">
<li>About me</li>
<li>Progress</li>
<li>Food</li>
<li>Contact</li>
</ul>
</div>
<h3 class="header-description"><span>text</span></h3>
</div>
</div>
How's this James?
.theContainer {
width: 200px;
height: 200px;
background-color: gray;
position: relative;
}
.theParent {
width: 80%;
height: 150px;
background-color: lightgray;
}
.theChild {
width: 100%;
background-color: lightgreen;
position: absolute;
}
<div class="theContainer">
<div class="theParent">
This is the parent trying to restrict the child to 80% width.
<div class="theChild">
This is the child with 100% width ignoring parent.
</div>
</div>
</div>
I have tried everything and failed. My current WordPress theme is not so mobile friendly, in fact, even at 768x1024 resolution it goes all crazy. I have only adjusted the content width, and sidebar width.
It is perfect at most of the screens, but if I try to view it on other devices, such as iPad, Kindle, it doesn't look right.
Screenfly iPad view: http://quirktools.com/screenfly/#u=http%3A//tryonlineroulette.com/&w=768&h=1024&a=22
Live website demo: http://tryonlineroulette.com
And here is the code that is responsible for mobile or different resolution view:
/***** Media Queries *****/
#media screen and (max-width: 1024px) {
.mh-container { width: 980px; }
#main-content { width: 630px; }
.main-nav { width: 100%; }
.loop-header, .loop-thumb { width: 100%; float: none; margin-right: 0; }
.loop-thumb, .loop-header .entry-meta { margin-top: 20px; }
.entry-title-wrap, .entry-meta-wrap { float: none; width: 100%; }
.entry-title-wrap { margin-bottom: 20px; margin-bottom: 1.25rem; }
.entry-header .entry-meta { float: left; }
.commentlist ul, .commentlist ol { margin: 0 0 30px 0; margin: 0 0 1.875rem 0; }
.commentlist ul ul, .commentlist ol ol { margin: 0; }
}
#media screen and (max-width: 767px) {
.mh-container { max-width: 440px; width: 90%; }
#main-content, #main-sidebar { float: none; width: 100%; margin-right: 0; }
#main-content { margin-bottom: 30px; margin-bottom: 1.875rem; }
[class*='mh-col-'] { float: none; width: 100%; margin: 0; }
.js .slicknav_menu { display: block; }
.js .main-nav { display: none; }
.header-wrap { padding: 0; }
.logo { padding: 40px 0; padding: 2.5rem 0; }
.latest-news-widget .news-item { margin-bottom: 30px !important; margin-bottom: 1.875rem !important; }
}
Any help will be much appreciated!
Thanks