Check this website on mobile you'll understand what I'm trying to do. This is my website
Notice how on the index on wix, the becomes display: block on mobile. I mean your success and the two other boxes.
I tried to do the same, it worked awfully on desktop when resizing the browser, but on mobile it didn't.
I have index_whitebox and index_whitebox_2 and index_whitebox_3
It goes like this:
CSS
.index_whitebox{
min-height: 380px;
width: 25%;
position: relative;
float: left;
margin-left: 6%;
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
display: inline-block;
}
Same CSS with slight difference in the margin for the other two boxes.
As for media query:
CSS
#media screen and (max-width: 500px) {
.index_whitebox{
min-height: 0;
width: 90%;
position: relative;
float: none;
margin-left: auto
margin: auto;
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
display: block;
}
}
HTML
<div class="whitebox_wrapper">
<div class="index_whitebox">
<div class="index_title">
title
</div>
<div class="index_image">
</div>
<div class="index_article">
<div class="index_first_cell_text_wrapper">
</div>
</div>
<div id="index_nav_container">
Contact
</div>
</div>
</div>
and same html for the other boxes.
Put this in your css file
#media screen and (max-width: 768px) {
.header{min-width:100%;}
#banner{min-width:100% !important;}
.whitebox_wrapper{min-width:100%;}
.index_wrapper{width:100%;}
}
it might help you
Related
I have no idea what would fix this.
https://jsfiddle.net/eL5gn73s/
That big one is a div, the small ones are the buttons that have shrunk.
The button should be the same size as the div, not the other way around.
After changing from a div to a button, the button shrunk smaller than the size of the div that was 47px.
.box {
position: relative;
background: red;
width: 47px;
height: 47px;
border-radius: 4px;
border-width: 4px;
border-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-left-color: rgba(0, 0, 0, 0.3);
border-right-color: rgba(0, 0, 0, 0.3);
border-bottom-color: rgba(0, 0, 0, 0.8);
}
.box.box2 {
background: red;
}
<button class="box box2" type="button"></button>
<button class="box " type="button"></button>
<div class="box"></div>
Give them both a display:block (or inline-block) and add box-sizing:content-box to both, then add box-sizing to both (border-box)
As for a FULL answer: this has to do with the border-box and content box which differs from div to button
Button uses the smaller and div the larger.
content-box uses the size + padding + borders
border-box uses size + padding - borders
SO your 4px X 2 border-radius has to be added TO the button to make it the same size as the div.
Here I show both the fixed and then the original for comparison (all as inline-block just for visual) Notice the first group is the same size as the second groups DIV.
Hopefully this gives a better explanation and how to "fix" it.
body {
font-size: 16px;
background-color: #ddffdd;
margin: 0;
padding: 0;
}
button.exit,
div.exit,
div.exit-new,
button.exit-new {
display: inline-block;
position:relative;
}
div.exit-new,
button.exit-new {
width: 47px;
height: 47px;
}
div.exit {
box-sizing: content-box;
width: 47px;
height: 47px;
top: 4px;
}
button.exit {
box-sizing: border-box;
width: 55px;
height: 55px;
}
/*add element just for specificity here */
button.exit,
div.exit,
div.exit-new,
button.exit-new {
background: red;
border-radius: 4px;
border-width: 4px;
border-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-left-color: rgba(0, 0, 0, 0.3);
border-right-color: rgba(0, 0, 0, 0.3);
border-bottom-color: rgba(0, 0, 0, 0.8);
}
.exit.exitPage2 {
background: red;
}
<div class="container">
<button class="exit exitPage2" type="button"></button>
<button class="exit " type="button"></button>
<div class="exit"></div>
</div>
<div class="container">
<div>originals</div>
<button class="exit-new" type="button"></button>
<button class="exit-new" type="button"></button>
<div class="exit-new"></div>
</div>
try editing the buttons in the .exitpage2 css like this
.exit.exitPage2 {
background: red;
width: 50px;
height: 50px;
}
it should do what you need it to if you set the height and width to the desired amounts
I was wondering if anyone could point in the direction of a solution!
For some reason my rightbar's height isn't staying within the parent div (mainwrapper), and I have the body and the wrapper's height set to 100%.
When I set it to 90% it fits but then when I resize the window to anything lower than 1920x1080, it goes out of the wrapper again.
Any and all would be appreciated!
I read online somewhere that it's usually floating divs that cause this, but I have nothing floating and I believe I have the corrent position:relative placed.
I've not worded this the best with "bar", so here's a gyazo image to hopefully help with this: https://gyazo.com/6661da9c5194e2c2619e5fe1b5e3f2c5 - As you can see, the bar goes out of the wrapper when set to 100%
My code:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-image: url(/css/images/backgroundimages/bgimg.png);
}
div#mainwrapper {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-left: 4px solid #000;
border-right: 4px solid #000;
box-shadow: 0px 0px 10px #000;
background-color: rgba(0, 0, 0, 0.6);
}
div#menubar {
background-color: rgba(41, 128, 185, 0.2);
text-align: center;
padding: 30px;
border-bottom: 3px solid #000;
}
div#menubar a {
text-align: center;
padding: 31px;
text-decoration: none;
color: rgba(255, 255, 255, 1);
transition: 0.3s;
font-size: 1.1em;
font-family: 'Muli', sans-serif;
text-shadow: 2px 4px 7px #000;
}
div#menubar a:hover {
background-color: rgba(0, 0, 0, 0.4);
padding: 30px;
font-size: 1.3em;
transition: 0.3s;
color: rgba(231, 76, 60, 1.0);
text-shadow: 1px 1px 2px #000;
font-weight: bold;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
div#maincontent {
width: 100%;
height: 100%;
}
div#rightbar {
width: 15%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
<div id="mainwrapper">
<div id="menubar">
HOME
FRIENDS
FORUM
CONTACT
</div>
<div id="maincontent">
<div id="rightbar">
</div>
</div>
</div>
EDIT: Try erasing the height: 100%; on div#rightbar and replace it with min-height: calc(100vh - 85px);
The reasoning: 100vh means '100% viewport height'. So whatever the height of your browser window is the height #rightbar will be. But you need to subtract the height of #menubar from it (85px). calc() helps you accomplish this. Take a note of this css property/value combo because you'll potentially use it a lot for making your footers stick to the bottom of the page (AKA 'sticky footers'). Make sure you have a space on either side of the - sign. If you don't include those spaces, the calc() function won't work.
OLD ANSWER: I apologize if I don't understand what you're wanting, but I'll give it a shot: #rightbar's height actually is inside of the wrapper - it's just not inside the border that you created around #menubar.
Erase border-bottom: 4px solid #000; from div#menubar and move it to div#mainwrapper instead. Here's an example: https://jsfiddle.net/ms2e2e5v/1/
I'm making a title bar, links on the left, center, and the right. Each separated by divs.
Floating left is no problem, centering the second div is no problem. But when I try to float the last div to the right it is clearing the other divs and is not inside my header. Why is this? It has to be something simple I am missing? Thank you very much
http://jsfiddle.net/GX9xn/
HTML
<div class="header-fixed">
<div class="header-container">
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-center">
title
</div>
<div class="nav-float-right">
<a>
<span>more</span>
</a>
<div>
</div>
</div>
CSS
.header-fixed {
height:56px;
border-top: 1px solid #222;
width: 100%;
background: green;
position: fixed;
}
.header-container {
width: 700px;
margin: 0 auto;
height: 56px;
}
.nav-float-left {
float:left;
height: 56px;
color: rgba(255, 255, 255, .55);
font-family:'Museo Sans W01 300',san-serif;
font-size: 13px;
text-shadow: 0px 1px 1px rgba(0, 0, 0, .95);
filter: dropshadow(color= rgba(0, 0, 0, .95), offx=0, offy=1);
}
.nav-center {
letter-spacing: 0.05em;
margin: 0 auto;
height: 43px;
width: 100px;
padding-top: 13px;
background: black;
color: #d4d2d2;
font-size: 29px;
font-family: “Lucida Grande”, sans-serif;
text-align: center;
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-webkit-box-shadow:inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-o-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
cursor: pointer;
}
.nav-center .ss-pika {
font-size: 17px;
margin-left: 1px;
margin-right: 0px;
}
.nav-center a {
display:block;
}
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
}
The center div will be above the float right div because it is a block element and block elements are not placed inline.
A walk around is to add the float-right element first.
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-float-right">
<a><span>more</span></a>
<div>
<div class="nav-center">
title
</div>
If you use float you also need to set the display property in order to do as you want.
I changed your fiddle by adding display:inline-block.
As you may notice you need to set the dimensions width for your divs (height optional).
Here : Fiddle
You can use display:table; , display:table-cell; instead of floats to arrange elements in single line:
Fiddle
Try this
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
bottom: 57px;
left: 12px;
}
You can adjust the right div by set the bottom and left attributes.
Fiddel: http://jsfiddle.net/GX9xn/6/
Please try this FIDDLE
There is slight change in your CSS file
.nav-float-right {
position:absolute;
float:right;
height: 55px;
width: 205px;
right:0;
top:0;
background: #fff;
}
I have a one page website with six sections. I would like each section to fill the entire screen or viewport (specifically an iPhone 4s). Currently, it is like each section is stacked on top of each other (this is not what I want).
HTML Tag:
<meta name="viewport" content="intial-scale = 1.0, maximum-scale = 1.0" />
HTML (only posting one section - each section is essentially the same):
<section class="container" id="music">
<div class="center">
<div class="info">
<h1 class="headline">music</h1>
<ul>
<li>Black Hour EP</li>
<li>You're Invited (Coming Soon)</li>
</ul>
</div>
</div>
</section>
CSS #media query:
#media (min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
#home{width: 100%;
background-image: url(../images/landingPage#2x.jpg);}
#navbar{display: none;}
#albumCover{width: 400px;
height: 400px;
margin-top: 175px;}
#albumCover p{font-size: 6em;
padding-top: 150px;}
#about{width: 100%;
background-image: url(../images/about#2x.jpg);}
.info{width: 500px;
height: 500px;
margin: 200px 0 0 200px;}
.headline{font-size: 3em;
margin: -20px 0 5px 0;}
.info p{padding-top: 30px;
font-size: 1em;
margin-bottom: -100px;}
#music{width: 100%;
background-image: url(../images/music#2x.jpg);}}
.info ul li{text-align: center;
font-family: eb-garamond, sans-serif;
font-size: 1.5em;
line-height: 2em;
text-transform: capitalize;}
/* Lighthouse */
iframe{width: 50%;
height: 50%;}
#close{margin: 50px 0 15px 350px;
padding: auto 5px;}
#videos{width: 100%;
background-image: url(../images/videos#2x.jpg);}}
#connect{width: 100%;
background-image: url(../images/connect#2x.jpg);}}
#contact{width: 100%;
background-image: url(../images/contact#2x.jpg);}}
#email a{font-size: .625em;}
.primeLine{font-size: 1em;}
#email li{margin: 0;}
}
Here is a screen shot of the current state: http://postimg.org/image/ya1488ebb/
Does anybody have any ideas that could help me out or get me thinking along the right track?
Then, I think this will solve your problem, jsFiddle.
You can add individual backgrounds to the different DIV's, margin, text, absolute elements, etc.
{
height: 300px;
width: 100%;
display: block;
float: left;
clear: none;
position: relative;
}
Adding a z-index to the divs along with box-shadow might provide what you're looking for in terms of the "stacked pages" effect - see this jsfiddle: http://jsfiddle.net/NZUWj/5/
.one {
height: 300px;
width: 100%;
display: block;
float: left;
clear: none;
position: relative;
z-index: 6;
background-color: red;
-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
}
In terms of images, background-image-size and other background-image properties seem pretty widely supported according to http://caniuse.com/#feat=background-img-opts, but if you're concerned about compatibility (IE 8) a javascript solution like backstretch.js might be better.
That being said, if your divs don't need to flow and always stay at 100% width, you don't need all those extra CSS properties. This format will work:
.one {
height: 300px;
width: 100%;
display: block;
background-color: red;
-webkit-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75);
}
See it in a jsfiddle: http://jsfiddle.net/GEdLV/4/
This is demo: http://jsfiddle.net/KS4eS/
Please take a look at demo first.
I'd like To set their alignment the same.
Something like this. How can I?
center
------------------------------------------------------
A2345343
B435234
C4364353
D3426432632
E46324362
F235235
GGGGG
------------------------------------------------------
HTML
<div class='general'>
<div class='list'>
<div class="top_page_function">A2345343</div>
<div class="top_page_function">B435234</div>
<div class="top_page_function">C4364353</div>
<div class="top_page_function">D3426432632</div>
<div class="top_page_function">E46324362</div>
<div class="top_page_function">F235235</div>
<div class="top_page_function">GGGGG</div>
</div>
</div>
CSS
.general {
background-color: rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
text-align: center;
padding: 10px;
}
.list{
width: 400px;
min-width: 250px;
margin-bottom: 20px;
}
This will get what you want:
.general {
background-color: rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
padding: 10px;
text-align:center;
}
.list{
margin-bottom: 20px;
text-align: left;
margin: 0 auto;
display: inline-block;
}
It will also work with any width. See here: http://jsfiddle.net/KS4eS/8/
Another trick is to add a wrap to .List div.
HTML:
<div class='general'>
<div class='list_wrap'>
<div class='list'>
<div class="top_page_function">A2345343</div>
<div class="top_page_function">B435234</div>
<div class="top_page_function">C4364353</div>
<div class="top_page_function">D3426432632</div>
<div class="top_page_function">E46324362</div>
<div class="top_page_function">F235235</div>
<div class="top_page_function">GGGGG</div>
</div>
</div>
</div>
CSS
.general {
background-color: rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
text-align: center;
padding: 10px;
}
.list_wrap{
margin:0 auto;
width: 250px;
}
.list{
width: 100%;
text-align:left;
margin-bottom: 20px;
}
JSFiddle
You can align your column like this:
.list div {
text-align:left;
margin-left:200px;
}
Maybe setting a container around the top_page_function class divs and setting its position to absolute with left as 50%,will do.
Other solutions work too, prefer them, but just because i have made the fiddle, I'm posting it.
And yes, you have to set the height of list clss on your own too.That's one con of this method.
JSFiddle