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
Related
I have a heading with a left side strip line; it's working fine in desktop but not looking fine in mobile view, in mobile strip line override the heading, how do I make this work in responsive (mobile) views?
.title {
font-size: 35px;
color: #000000;
font-family: "Open Sans"!important;
margin-bottom: 10px;
clear: both;
margin-left:50px;
}
.strip {
background-color: #ffc20e;
width: 87%;
position: absolute;
height: 31px;
border-radius: initial!important;
left: -1010px;
}
#media only screen and (max-width: 550px)
.strip {
left: -356px!important;
}
<h4 class="title"><span class="strip"></span>Heading</h4>
there is no need of any media query!
.title {
font-size: 35px;
color: #000000;
font-family: "Open Sans"!important;
margin-bottom: 10px;
clear: both;
}
.strip {
background-color: #ffc20e;
width: 110px;
display: inline-block;
height: 25px;
margin-right: 8px;
}
#media screen and (max-width: 767px){\
.title {
font-size: 18px;
}
.strip {
width: 50px;
}
}
<h4 class="title"><span class="strip"></span>Heading</h4>
The media query is changing everything but not the colour property. I wonder why? It is only working if I don't define the color property and leave it to default. Why media query can't change the color?
https://jsfiddle.net/6spv3mrf/
<style>
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
</style>
You need to move #media css after your h1 css. Right now you are basically overwriting your #media properties with your normal css. If you add for example body inside your #media properties then your general body css should also be defined before the #media properties.
You can find more information in the official documentation:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all #media rules containing the declaration and on all links on the path through which the style sheet was reached.
You can find full documentation on the link.
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
move the media query to the end of the css
more info on why it works
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
As we already wrote in the comments: The media query has to follow AFTER the general rule, since otherwise it is overwritten by the properties in the general rule (which apply to everything, so it's a matter of order):
Here's the (edited) code from your fiddle, which, BTW, you can as well put into a snippet here on SO:
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
<div id="box">
<div id="text">
<h1>
Random<br> Text
</h1>
</div>
</div>
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;
}
I have a small problem with centering some anchor elements I have written. I only can't center them on a mobile version of the site, they seem to be a little bit placed to the left side. To change the style of the site for mobile version I used #media queries.
That's the code:
HTML
<div id="page">
<ul id="icons">
<li><object type="image/svg+xml" data="images/pl.svg"></object></li>
<li><object type="image/svg+xml" data="images/gb.svg"></object></li>
</ul>
<img src="images/ryszard_final.png" alt="Ryszard Kukliński Logo" />
<div id="buttons_div">
BIOGRAFIA
RECENZJA
<div style="clear: both;" class="btn"></div>
O PROJEKCIE
KOMIKS
</div>
</div>
CSS
/******************
GENERAL
******************/
body {
background-color: #1f1f2e;
color: white;
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Lato', sans-serif;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
color: white;
}
/******************
MENU PAGE
******************/
img {
display: block;
margin: 0 auto;
height: 20%;
width: 20%;
margin-bottom: 5%;
margin-top: 5px;
}
.btn1 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
height: 15%;
width: 40%;
border-radius: 10px;
line-height: 70px;
cursor: pointer;
border: 3px solid #a20000;
display: block;
position: relative;
overflow: hidden;
background: transparent;
transition: 0.3s;
margin-bottom: 15%;
}
.btn1:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #e60000;
opacity: .5;
top: -100%;
left: 0;
z-index: -1;
transition: 0.3s;
}
.btn1:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #e60000;
top: -100%;
left: 0;
z-index: -1;
transition: 0.3s;
transition-delay: 0.2s;
}
.btn1:hover {
color: #fff;
}
.btn1:hover:before {
top: 0;
}
.btn1:hover:after {
top: 0;
}
.btn1_float {
float: left;
}
.btn2_float {
float: right;
}
#icons {
position: absolute;
right: 0;
list-style: none;
margin: 0;
padding: 0;
float: right;
margin-top: 10px;
margin-right: 5px;
}
#icons li {
display: inline-block;
}
object {
height: 16px;
width: 32px;
}
#media (max-width: 480px) {
#buttons_div {
width: 75%;
margin: 0 auto;
}
.btn {
float: left;
width: 75%;
}
}
#media (min-width: 1000px) {
#buttons_div {
max-width: 65%;
margin: 0 auto;
}
}
When I try to center it, it just doesn't work. Look at the photo below to see what I mean:
Page
As you see it doesn't work. It just pushes all buttons to the left. Can anyone help me, please?
You could try using the "position:absolute;" instead of text-align in the css page,then write the position of the buttons using bot:x px ,top:y px and so on,i think that the buttons show a litlle bit to the left because of the media queries that you used
You can:
Place them in ul, assign li before anchor, and text-align center
or
Place an anchor within a div, set divs width to 100% and text-align center
In your media query #media (max-width: 480px), change the width of .btn to 100%.
I am working on a mobile responsive website.
I have the navigation menu with the fixed position.
Right after I close the nav-menus div I have an image that has to be right under it. The thing is that the image goes under the fixed div of the menu.
What is the solution for this?
I want the yellow banner to be fully visible under the nav bar. now it's just under + behind it.
This is an example of what I have :
HTML code:
<!DOCTYPE html>
<html >
<body style="height:100%;">
<div data-role="panel" id="menu" class="" style="padding: 45px 0; margin: 0; " >
<div class="ui-panel-inner">
// the main menu in the background
</div>
</div>
<div id="superDiv" style="background-color: white; -webkit-transition: width 2s; transition: width 2s; height: 130%; ">
<div class="main" style="height: 100%;">
<div class="sidebar">
// menu items
</div>
<div class="header_space"></div> // I used this but it's now working good with precentages..
<img src="banner.png" id="mob-banner"/> // this is the banner
<div class="dynamicPage">
// content of the page..
</div>
</div>
</div>
</body>
</html>
The CSS code:
/******************/
/*** MOBILE ******/
/****************/
.header_space{
display: none;
height: 5.1%;
}
#mob-menu-btn{
display: none;
}
.sub-menu{
display: none;
}
#mob-home-btn{
display: none;
}
#mob-logo{
display: none;
}
#mob-banner{
display: none;
}
.makeFixed{
position: fixed;
}
/*****************************************************************/
#media (max-width: 604px) {
.main{
width: 100%;
/*overflow: hidden;*/
overflow-x: hidden;
}
.sidebar{
float: initial;
width: 100%;
padding: 0;
position: fixed;
z-index: 100;
background-image: url('top_background.png');
text-decoration: none;
}
.header_space{
display: inherit;
height: 4.7%;
}
.sports{
/*display: none;*/
padding: 0 ;
background-color: #fff;
margin: 0;
width:100%;
}
.list{
width: 100%;
overflow: hidden;
overflow-y: auto;
top: -10%;
overflow: hidden;
overflow-y: auto;
height: 880%;
display: none;
}
.sports li{
list-style-image:none;
list-style-type: none;
border-bottom: 2px solid #eeeeee;
margin-bottom: 0px;
margin-left: 0px;
/*padding-top: 15px;
padding-bottom: 15px;*/
padding-left: 10px;
width:100%;
font-family: arial;
text-decoration: none;
overflow: hidden;
/*height: 27px;*/
z-index: 100;
}
.sports a li {
text-decoration: none;
}
.sports2{
display: none;
margin-bottom: 0;
overflow: hidden;
}
.sub-menu{
display: inherit;
float: left;
cursor: pointer;
width: 30px;
/*margin-right: 20px;*/
position: relative;
bottom: 7px;
z-index: 900;
position: relative;
top: 7px;
padding-right: 17px;
}
.sports2 li{
list-style-image:none;
list-style-type: none;
border-bottom: 0px solid #eeeeee;
margin-bottom: 0px;
margin-left: 0px;
/*padding-top: 15px;
padding-bottom: 15px;*/
padding-left: 0px;
width:100%;
font-family: "arial";
text-decoration: none;
overflow: hidden;
}
.sports2 div{
padding: 15px 0;
}
#mob-menu-btn{
float: right;
width: 10%;
display: inherit;
cursor: pointer;
margin-top: 0.8%;
}
#mob-home-btn{
display: inherit;
cursor: pointer;
margin-top: 0.8%;
width: 10%;
float: left;
}
#mob-logo{
display: inherit;
text-align: center;
margin: 0.2% auto;
width: 30%;
}
#mob-banner{
display: inherit;
}
.banner{
display: none;
}
.content{
width:100%;
background-color: white;
}
.logo{
padding-top: 1px;
}
#cat-header{
display: none;
}
.line{
display: none;
}
.table {
width: 100%;
}
#top-pages{
display: none;
}
.top-pages{
display: none;
}
.category-link{
float:left;
padding-top: 25px;
width: 510px;
padding: 15px 0;
}
.content h1 {
color:#031c3f;
font-size:24px;
text-align: left;
font-family: "UScoreRGK";
margin-left: 7px;
}
.content p {
margin-left: 10px;
margin-right: 10px;
}
#active_line{
margin-left: 10px;
margin-right: 10px;
}
#menu {
z-index: 0;
top: 0px;
position: absolute;
/*right: 0px!important;
left: auto!important;*/
}
#menu li {
list-style: none!important;
}
}
#media (min-width : 414px) and (max-width : 533px) {
.category-link{
width: 460px;
}
}
#media (min-width : 375px) and (max-width : 414px) {
.category-link {
width: 340px;
}
.wcmText ul, ol{
margin: 0 0 1em -2.5em;
}
.wcmText p{
margin-top: 0;
}
.wcmText h1, h2{
margin-top: 0;
margin-bottom: 0;
font-size: 110%;
}
}
#media (min-width : 360px) and (max-width : 375px) {
.category-link {
width: 282px;
}
.sidebar{
height: 38px;
}
}
#media (min-width : 320px) and (max-width : 360px) {
.wcmText ul, ol{
margin: 0 0 1em -2.5em;
}
.wcmText p{
margin-top: 0;
}
.wcmText h1, h2{
margin-top: 0;
margin-bottom: 0;
font-size: 110%;
}
}
#media (min-width : 240px) and (max-width : 320px) {
.sidebar{
background-image: url('top_background-320-2.png');
height: 52px;
}
#mob-menu-btn {
width: 7%;
margin-top: 4.8%;
margin-right: 4%;
}
#mob-home-btn {
width: 7%;
margin-top: 4.8%;
margin-left: 4%;
}
#mob-logo {
margin: 2% auto;
width: 45%;
}
.header_space {
height: 52px;
}
.list {
width: 99.5%;
overflow: hidden;
overflow-y: auto;
top: -9%;
overflow: hidden;
overflow-y: auto;
height: 803%;
}
.sports li {
width: 96%;
}
.content h1 {
color:#031c3f;
font-size:24px;
text-align: left;
font-family: "UScoreRGK";
margin-left: 7px;
}
.content p {
margin-left: 10px;
margin-right: 10px;
}
.category-link{
float:left;
padding-top: 25px;
width: 230px;
padding: 15px 0;
}
}
It looks like the only thing you are missing to make the ".header_space" work is to add
style="height: 100%;" to your HTML tag
<html style="height: 100%;">
or in your CSS
html { height:100% }
all your height properties, for example "height:100%" on the BODY tag, are not working.
although, i don't think your solution is an elegant one.
I would prefer to add
#media (max-width: 604px) {
/* lets say 50px is the height of your mobile menu */
#mob-banner { margin-top: 50px; }
}
to the the media query that handles your mobile views, instead of
<div class="header_space"></div>