I have set my header and footer width to 100% but somehow header is wider than page making a scroll bar appear at bottom, content and footer match page width, only header is wider maybe because i have used media query for drop down menu inside header. My code is
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #EDEDED;
}
.headerMenu{
width: 100%;
padding: 30px;
background-color:#BF3B3D;
}
#wrapper {
width:100%;
background-color:#BF3B3D;
}
.logo img {
position: absolute;
top:0;
float:left;
background-image: url(../img/menu_bg.gif);
width: 110px;
height: 58px;
}
.search_box {
top: 7px;
float:left;
color: #198C9E;
background-color:#BF3B3D;
position: absolute;
margin-left: 155px;
}
#media screen and (max-width: 1280px) {
.dd {
background-color:#BF3B3D;
position: absolute;
right:0px;
top:0;
margin-right: 4%;
}
}
#media screen and (min-width: 1280px) {
.dd {
background-color:#BF3B3D;
position: absolute;
right:0px;
top:0;
margin-right: 10%;
}
}
#media screen and (min-width: 1920px) {
.dd {
background-color:#BF3B3D;
position: absolute;
right:0px;
top:0;
margin-right: 25%;
}
}
Here dd is class for drop down menu.
That's because you are applying a padding to your header.
To change that behavior, use the box-sizing property.
.headerMenu{
background-color:#BF3B3D;
box-sizing: border-box;
padding: 30px;
width: 100%;
}
Related
I created a _mobile.scss to add responsive design to my website but some of my media queries are not overriding the default styles. I checked other posts on this topic which talked about 'specificity' but I made sure that the _mobile.scss is imported in the style.scss after the _home.scss (where I'm currently styling)
this is the content of styles.scss:
#import 'utilities/config';
#import 'layout/sidebar';
#import 'pages/home';
#import 'layout/mobile';
this is the _mobile.scss :
/
* Large screens */
#media screen and (min-width: 600px) {
.navbar {
top: 0;
left:0;
width: 8rem;
height: 100vh;
}
.navbar:hover {
width: 20rem;
}
.navbar:hover .link-text {
display: inline;
}
}
/* Small screens */
#media screen and (max-width: 800px) {
.banner-wrapper{
img{
width:50%;
}
}
.intro-text{
h1{
font-size: 2rem;
}
.typing::after{
height:50%;
}
}
.about-content{
flex-direction: column;
img{
width:100%;
}
p{
font-size: 1.5rem;
}
}
}
#media screen and (max-width: 600px) {
.navbar {
bottom: 0;
left:0;
width: 100%;
height: 5rem;
z-index:1;
}
.logo {
display: none;
}
.navbar-nav {
flex-direction: row;
width: 100%;
}
.nav-link {
justify-content: center;
height: 5rem;
i{
font-size: 2rem;
}
}
main {
margin: 0;
}
}
And this is a portion of the _home.scss(the part that isn't working):
#banner{
position: relative;
top: -5rem;
width: 100%;
height: 100vh;
}
.banner-wrapper{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem;
img{
margin-left: auto;
margin-right: auto;
display: block;
width: 30%;
margin-bottom: 3rem;
}
.intro-text{
text-align: center;
h1{
font-size: 5rem;
text-transform: uppercase;
margin-bottom: 0;
margin-top: 0;
}
.typing{
position: relative;
margin-left:10px;
}
.typing::after{
content: "";
position: absolute;
right: -2px;
width:1px;
height: 100%;
border-right: 2px solid black;
animation: blink 0.5s infinite ease;
}
}
}
Where I'm confused is that I am able to change the img width of the .banner-wrapper on small screens (less than 800px) but changing the font-size of the h1 and height of .typing::after in .intro-text has no effect. So how can I fix this? Thank you in advance
After checking your code i found that in your _home.scss the .intro-text is wrapped inside .banner-wrapper whereas in your media query you're defining the .intro-text outside the .banner-wrapper double check it by defining the .intro-text inside the brackets of .banner-wrapper in the _mobile.scss and it might be the problem.
I'm working on a simple institutional website and all works well, except for the media queries. I'm new to this technology so I don't really know whats going on.
My issue appears when I open the collapsed bootstrap menu on iPad like screens and smaller and it depends on the browser.
It works fine for Firefox and has some issues with Chrome and Safari, so it makes me believe that my code is working, but I am missing some important aspects of browser compatibility.
I want the navbar menu to open with a gray background when the screen is medium size (only works for Firefox) and black for mobile (Safari has a bug which opens the whole menu and them cuts it by half).
This is the website: flowersforpeaceproject.com
And here is the code:
body {
margin: 0;
padding: 0;
font-family: 'Merriweather Sans', sans-serif;
}
/*NAVBAR*/
.navbar{
border: 0;
position: absolute;
top: 0;
z-index: 10;
width: 100%;
}
.navbar .nav > li > a{
color: #1E73BE;
}
.navbar-default{
background-color: transparent;
}
nav .navbar-brand img{
height: 220px;
margin-right: 20px;
}
/*MEDIA QUERIES*/
#media screen and (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
/*MY CODE*/
#bs-example-navbar-collapse-1 .navbar-right{
background-color: rgb(50,50,50, 0.9);
border-radius: 10px;
max-width: 180px;
}
}
#media screen and (max-width: 480px){
nav .navbar-brand img{
height: 120px;
margin-right: 20px;
}
#bs-example-navbar-collapse-1 .navbar-right{
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
}
/*END MEDIA*/
...
There's an good Resource available for learning and playing with media querys. here
Since this is an Browser based media query bug you can easily solved by specifying different CSS to each screen resolutions.
Here is an good tool to generate media Query. Open Site.
in your code you can generate css, for example for different Screen Resolutions.
#media screen and (max-width: 400px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 401px) and (max-width: 720px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 721px) and (max-width: 1280px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 1281px) and (max-width: 1440px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 1441px) and (max-width: 1920px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 1921px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
My question is why will only the iphones min and max widths load in my css but
not my ipads min and max widths? I know that all my css does work individually but not all together. I also tried using multiple stylesheets instead but i had the same issue..where only the last 2 stylesheets would load.
<head>
<title></title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css?v=1"/>
</head>
container, header, menu, home-info {
display: inline-block;
}
body {
background-color: pearl white;
}
#container {
width: 50%;
height: 800px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
.header {
height: 200px;
width: 100%;
color: white;
transform: translateX(-50%);
left: 50%;
position: absolute;
text-align: center;
font-size: 220px;
background-color: grey;
}
.menu {
position: absolute;
top: 205px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
}
.menu ul{
margin: 0;
padding: 0;
float:left;
}
.menu ul li{
float:left;
list-style:none;
position:relative;
}
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 775px;
height: 25px;
background-color: silver;
font-size: 25px;
border-radius: 5px;
color: white;
}
.menu ul li a:hover{
background: yellow;
color: #00357d;
box-shadow: 5px 5px 25px 5px yellow;
}
.menu ul ul{
visibility:hidden;
position:absolute;
}
.menu ul li:hover ul{
visibility:visible;
}
.menu ul ul li a:hover {
background: yellow;
color: #00357d;
}
.menu ul ul ul {
visibility: hidden;
position: absolute;
}
.menu ul ul li:hover ul {
visibility: visible;
}
.menu ul ul ul li a:hover {
background: yellow;
color: #00357d;
}
.menu ul ul ul ul {
visibility: hidden;
position: absolute;
}
.menu ul ul ul li:hover ul {
visibility: visible;
}
.menu ul ul ul ul li a:hover {
background: yellow;
color: #00357d;
}
.menu ul ul ul ul ul {
visibility: hidden;
position: absolute;
}
.menu ul ul ul ul li:hover ul {
visibility: visible;
}
.home-info {
color: grey;
font-size: 20px;
top: 550px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
/*max-ipads*/
#media only screen and (max-width: 1024px){
#container {
width: 50%;
height: 800px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
#media only screen and (max-width: 1024px){
.header {
position: absolute;
height: 100px;
width: 100%;
color: white;
transform: translateX(-50%);
left: 50%;
text-align: center;
font-size: 105px;
background-color: grey;
}
}
#media only screen and (max-width: 1024px){
.menu {
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
}
}
#media only screen and (max-width: 1024px){
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 350px;
height: 15px;
background-color: silver;
font-size: 25px;
border-radius: 5px;
color: white;
}
}
#media only screen and (max-width: 1024px){
.home-info {
color: grey;
font-size: 15px;
top: 420px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
}
/*---min-width---*/
#media only screen and (min-width: 768px){
#container {
width: 50%;
height: 1024px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
#media only screen and (min-width: 768px){
.header {
height: 80px;
width: 100%;
background-color: grey;
color: white;
transform: translateX(-50%);
left: 50%;
position: absolute;
text-align: center;
font-size: 80px;
}
}
#media only screen and (min-width: 768px){
.menu {
position: absolute;
top: 55px;
left: 50%;
padding: 5px;
transform: translateX(-50%);
}
}
#media only screen and (min-width: 768px){
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 480px;
height: 25px;
background-color: silver;
font-size: 15px;
border-radius: 5px;
color: white;
}
}
#media only screen and (min-width: 768px){
.home-info {
color: grey;
font-size: 21px;
top: 430px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
}
/*iphones-max*/
#media only screen and (max-width: 480px){
#container {
width: 50%;
height: 350px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
#media only screen and (max-width: 480px){
.header {
height: 50px;
width: 100%;
color: white;
transform: translateX(-50%);
left: 50%;
position: absolute;
text-align: center;
font-size: 50px;
background-color: grey;
}
}
#media only screen and (max-width: 480px){
.menu {
position: absolute;
top: 55px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
}
}
#media only screen and (max-width: 480px){
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 125px;
height: 15px;
background-color: silver;
font-size: 10px;
border-radius: 5px;
color: white;
}
}
#media only screen and (max-width: 480px){
.home-info {
color: grey;
font-size: 10px;
top: 270px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
}
/*smartphone-min*/
#media only screen and (min-width: 320px){
#container {
width: 50%;
height: 420px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
#media only screen and (min-width: 320px){
.header {
height: 80px;
width: 100%;
background-color: grey;
color: white;
transform: translateX(-50%);
left: 50%;
position: absolute;
text-align: center;
font-size: 80px;
}
}
#media only screen and (min-width: 320px){
.menu {
position: absolute;
left: 50%;
padding: 5px;
transform: translateX(-50%);
margin-top: 30px;
}
}
#media only screen and (min-width: 320px){
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 200px;
height: 25px;
background-color: silver;
font-size: 10px;
border-radius: 5px;
color: white;
}
}
#media only screen and (min-width: 320px){
.home-info {
color: grey;
font-size: 10px;
top: 320px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
}
If this is exactly how your styles are laid in your stylesheet (tough to tell without seeing an actual source), then I believe your problem is NOT that the iPad styles aren't loading - it's that they are loading in the wrong order.
You should lay out your styles from smallest (top) to largest (bottom) (i.e. 320 then 480 then 768 etc.). Otherwise your smaller screen styles are likely overriding your larger screen styles.
For example, if I do:
#media (max-width: 1024px) {
.box { background: red; }
}
#media (min-width: 420px) {
.box { background: yellow; }
}
The background color will be yellow on any screen from 420px to 1024px.
Therefore, you need to either switch the order from smaller to larger OR you can get more specific with your media queries. Example:
#media (min-width: 768px) and (max-width: 1024px) {
.box { background: red }
}
This is a really basic question, but I simply can't get this to work. I styled a h1 heading in a bootstrap framework, but cant get it to either:
-stay in center
-make it smaller on smaller screens
Any help will be greatly appreciated!
My css:
.itsthisone h1 {
background-color: #fff;
border: 6px solid #dfdfdd;
color: #f47d41;
font-size: 18px;
margin-left: auto ;
margin-right: auto ;
padding: 20px 0;
position: absolute;
top: -34px;
text-align: center;
width: 720px;
}
#media (max-width: 479px) {
.itsthisone h1 {
font-size: 14px;
top: -15px;
margin-left: auto ;
margin-right: auto ;
padding: 10px 0;
}
}
#media (max-width: 768px) {
.itsthisone h1 {
font-size: 14px;
width: 360px;
}
}
My HTML:
<section class="itsthisone">
<h1>keep it in center!</h1>
Thanks in advance! (< /section> seems to dissapear from the code)
You can do this:
The logical: Move 50% of your absolute container and put half negative margin of the width of the container , then you get the center of the container relative to his parent. (static method)
CSS
.itsthisone h1 {
background-color: #fff;
border: 6px solid #dfdfdd;
color: #f47d41;
font-size: 18px;
padding: 20px 0;
position: absolute;
top: -34px;
text-align: center;
width: 720px;
left: 50%;
margin-left: -360px;
}
#media (max-width: 479px) {
.itsthisone h1 {
font-size: 14px;
top: -15px;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
}
}
#media (max-width: 768px) {
.itsthisone h1 {
font-size: 14px;
width: 360px;
left: 50%;
margin-left: -180px;
}
}
DEMO HERE
I was able to do the Accordion Nav bar to respond on laptop/desktop when a certain size has meant. However, it doesn't respond for any mobile devices. Another issue that I am having is it is not displaying the icon for the Accordion Menu bar for either desktop and mobile devices. Any help would be appreciated to resolve the issue I am having.
Thank you
Responsive CSS:
/*This is the placeholder for responsive CSS that we will implement for mobile design*/
/* Smartphones ----------- */
#media screen and (min-width : 240px) and (max-width: 519px){
/* Styles */
#content{
float:none;
padding:0;
width: auto;
}
img{
max-width: 100%;
height: auto;
width:auto\9; /*for ie8*/
}
body{
float:left;
font-family: 'Fabrica';
}
#logo {
margin-right:auto;
max-width: 100%;
height: auto;
padding: 0;
}
#wrapper{
margin: 0 auto;
}
#wrapper p{
text-indent: 0;
}
h1, h2, h3 {
font-family: 'Fabrica';
}
nav{
position: relative;
min-height: 40px;
}
nav ul{
position:absolute;
width: 180px;
padding: 5px,0;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(.../img/menu-bar-mobile.jpg) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
nav ul:hover li{
display: block;
margin: 0 0 5px;
}
nav a:hover {
display:block;
}
nav li{
display:none;
margin:none;
}
#banner{
display: none;
}
footer{
font-family: 'Fabrica';
float:left;
}
}