I have a little problem using responsive navbar. I have two divs that centralize my page.
<div id="tudo">
<div id="conteudo">
<!--My content here-->
</div>
</div>
And the css:
#tudo
{
width: 876px;
margin: 0 auto;
text-align: left; /*hack for IE*/
}
#conteudo
{
padding: 5px;
}
But when I copy the code for responsive the layout does not work -> Here
The problem is that your CSS is setting #tudo to a fixed width of 876px which doesn't allow the navbar to be responsive.
The easiest solution would be to use a #media query to set the width of the #tudo to auto when the responsive navbar kicks in at 979px
#tudo
{
width: 876px;
margin: 0 auto;
text-align: left; /*hack for IE*/
overflow:hidden;
}
#conteudo
{
padding: 5px;
overflow:hidden;
}
#media (max-width: 979px) {
#tudo {
width: auto;
margin: 0;
}
#conteudo {
width: auto;
}
}
Demo on Bootply
Related
I'm not really sure if I need a wrapper to delimit the max-width of the container.
The header has a 100% width, and the .wrapper delimits to a 1000px max width.
Is there any way to avoid using the .wrapper div?
body { margin: 0; }
header {
margin: 0;
padding: 0;
background-color: DarkRed;
}
.header-wrapper {
margin: auto;
max-width: 500px;
padding: 10px 0;
}
#logo, #tagline, #menu {
margin: auto;
padding: 5px;
}
#logo {
flex: 2;
background-color: Crimson;
}
#tagline {
flex: 5;
background-color: Salmon;
}
#menu {
flex: 3;
background-color: IndianRed;
}
#media (min-width: 768px){
.header-wrapper {
display: flex;
}
}
<header>
<div class="header-wrapper">
<div id="logo">Logo</div>
<div id="tagline">Tagline</div>
<div id="menu">Menu</div>
</div>
</header>
CodePen
This will depend on your exact needs, there's no fast rule about your exact html structure when it comes to designing a page.
If you want a background color that extends the entire 100% width but you want the content to have a hidden left/right barrier, you probably want a wrapper to force that barrier rule. otherwise, the red background will only be as wide as the 1000px rule (or whatever you set your centered bounds to)
if you don't need a barrier and want the content/nav items to span the entire width, then you don't need a wrapper.
again, it's really up to you depending on the overall design of the component
Set all div max-width, which is equal to 1000px
what you did looks like your wrapper will always be 500px according to mediaqueries, so width of each elements are static.
You can modify your mediaqueries and remove the extra wrapper and the flex values.
Snippet below behave just like your codepen ... with a wrapper less :
body {
margin: 0;
}
header {
margin: 0;
padding: 0;
background-color: DarkRed;
padding: 10px 0;
}
#logo,
#tagline,
#menu {
padding: 5px;
}
#logo {
background-color: Crimson;
}
#tagline {
background-color: Salmon;
}
#menu {
background-color: IndianRed;
}
#media (min-width: 768px) {
header {
display: flex;
justify-content: center;
}
#logo {
width: 100px;
}
#tagline {
width: 250px;
}
#menu {
width: 150px;
}
}
<header>
<div id="logo">Logo</div>
<div id="tagline">Tagline</div>
<div id="menu">Menu</div>
</header>
http://codepen.io/gc-nomade/pen/ENqPVp
For some reason .headPhone is staying to the right when i resize my browser or view the pageon a mobile. I want to take the float off or add some margin so it centers on a smaller display. How can i achieve this?
HTML
<div class="headDiv">
<div class="headPhone">
<p class="fa fa-phone fa-xlg">000000</p>
</div>
</div><!--headDiv-->
CSS
.headDiv {display:block; max-width:100%;}
.headPhone {float:right;}
#media (max-width: 768px) {
.headDiv .headPhone {float:none; margin: 0 auto;}
}
You could use display:table so the div will shrink to fit the content automatically.
http://jsfiddle.net/Lb7ky6vL/
#media (max-width: 768px) {
.headDiv .headPhone {
float: none;
display: table;
margin: 0 auto;
}
}
The float right was your issue and it sort of overrides the properties of display: block;. I answered this under the impression that you wanted the div to be full width. I added some color for checking.
.headDiv {
display: block;
max-width: 100%;
background: yellow;
}
.headPhone {
float: right;
background: red;
}
#media (max-width: 768px) {
.headDiv .headPhone {
width: auto;
float: none;
margin: 0 auto;
}
}
I'm sorry if this is a duplicate question, but I can't find an easy solution.
The Problem: I have a divdisplaying a timeline. This div is centered at the top by:
margin: 0 auto
Now I have a search field, which should be displayed on the top right of the page. When the window is wide enought, both elements shoulb be displayed on the top.
If the window is too small, the timeline should float under the search field.
My Html:
<div class="search">
<form.../>
</div>
<div class="timeline">...</div>
My Css:
.search {
float: right;
margin-right: 14px;
position: relative;
top: -1px;
}
.timeline{
width: 768px;
height: 15px;
margin: 0 auto;
overflow: visible;
padding: 48px 40px 15px;
}
You can use mediaqueries like in this FIDDLE :
add this CSS :
#media screen and (max-width:1000px) {
.search {
float:none;
margin: 0 auto;
}
}
I've got a logo on my website that i'm trying to make stay in the middle and be responsive. I've tried tons of CSS code from "magin-left:auto;..." to "top:30..." but the logo wont get smaller and stay in the middle. I was wondering if anyone could help me. Heres my website -- http://www.mediadude.co.uk -- The logo is the big mediadude sign in the middle, Try resizing the browser and you can see that it doesn't stay in the middle and get smaller.
Thanks for you time.
Hantoo
You have set max-width to the image but not to the h1 tag.
h1#LogoMain {
max-width: 100%;
}
Also you have a media query giving body padding: 20
#media (max-width: 767px) {
body {
padding-top: 0;
padding-right: 20px;
padding-left: 20px;
}
Change the above values to 0 for an edge to edge look on your header etc.
This will do what you want: http://jsfiddle.net/TJF8k/1/
<div class="header">
<div class="floater"></div>
<div class="imgwrap">
<img class="image" src="//placehold.it/400x150">
</div>
</div>
For the CSS, you'll need to adjust the negative margin-bottom on .floater based on the dimensions of your image.
.header {
background-color: teal;
height: 300px;
}
.floater {
height: 50%;
width: 100%;
margin-bottom: -10%;
}
.imgwrap {
width: 50%;
margin: 0 auto;
max-width: 400px;
}
.image {
max-width: 100%;
vertical-align: bottom;
}
I have a regular layout that looks that this:
This layout is done using CSS floats.
When I switch to mobile, I want my layout to do this:
That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?
Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.
CSS:
#sidebar {
float: left;
width: 30%;
}
#content {
float: right;
width: 70%;
}
.mobile #sidebar,
.mobile #content {
float: none;
display: block;
margin-bottom: 15px;
}
Standard HTML:
<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Mobile HTML:
<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Media query, flex container and its order property should do the trick:
#media(max-width:767px) {
.container {
display: flex;
flex-wrap: wrap;
}
.content {
order: 1;
}
.sidebar {
order: 2;
}
}
Make sure to replace max-width value with your own mobile breakpoint.
Browser support for flex is also pretty decent now.
Assuming:
The two elements have a shared parent element
The content div appears BEFORE the sidebar in the source
You don't have to change the source order, you can achieve this with floats by default.
That is, in your desktop layout:
#content {
float: right;
width: 60%;
}
#sidebar {
float: left;
width: 40%;
}
Then, for mobile (using media queries or whatever other mechanism):
#content, #sidebar {
float: none;
clear: both;
}
Inside your mobile media queries set float:none.
Actually, I wanted to set layout like first layout so I had used:
.iconHome{
float: left;
border: 1px solid #73AD21;
width: 50%;
height: 100px;
background-color: aqua;
/*margin: 50px;*/
}
<div class="iconHome1">
</div>
<div class="iconHome1">
</div>
The result is the second layout!!!There fore, I think default "float:left" is not be set on mobile. You can use above way. Hope help you
Edit:
I tried some codes:
.iconHome1{
float: left;
border: 1px solid #73AD21;
width: 50%;/*185px*/
height: 200px;
background-color: aqua;
margin: 0;/*0 0 0 -7px*/
/*clear: left;*/
}
That means "width" & "margin" will effect to layout,although you have to set "float:left". Fix "width:49%", result: