I'm trying to build an info card where if the screen is large, you'd have an image filling the left half of the card and text on the right and if the screen is small you'd have the picture on the top and text on the bottom. I was able to do the first part by adding position: absolute;top: 0;left: 0;bottom: 0;width: 40%, and the setting background-image: src;background-size: cover; and then setting margin-left: 40% on the content. But ultimately this makes it hard for a structure like this to adapt to screen sizes without some javascript. I'd like to avoid using js as much as possible for this so I looked for solutions online and came upon answers such as using a flexbox and using the object-fit css property, but none of those really worked. Here's my code:
.signup-form-wrapper {
display: flex;
align-items: center;
height: 400px;
width: auto;
border: 1px solid rgb(200, 200, 200);
margin: 10px 0px;
}
.img-wrapper {
height: 100%;
width: 50%;
}
.img-wrapper img {
display: block;
max-width: 100%;
height: auto;
}
.content-wrapper {
display: inline-block;
max-width: 60%;
text-align: center;
padding: 0px 14%;
}
body {
height: 100%;
width: 100%;
}
<body>
<div class='signup-form-wrapper'>
<div class='img-wrapper'>
<img src='http://www.parkermeridien.com/media/pool_fashion_f.jpg' />
</div>
<div class='content-wrapper'>
<p>Hello, World!</p>
</div>
</div>
</body>
You were on the right track!
Media queries (which you experimented with) are the right way to do this without JavaScript. I went back to using a background-image instead of an img - here's a simple way to do this using floating to keep the elements side-by-side, with a media query (at the bottom of the CSS) that turns off the floating so the elements stack.
I also added box-sizing: border-box; for all elements to prevent padding/borders from modifying the size of elements (which is good practice).
body {
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
.signup-form-wrapper {
height: 350px;
border: 1px solid rgb(200, 200, 200);
margin: 10px 0px;
}
.img-wrapper {
height: 100%;
width: 40%;
float: left;
background-image: url('http://www.parkermeridien.com/media/pool_fashion_f.jpg');
background-size: cover;
}
.content-wrapper {
float: left;
width: 60%;
text-align: center;
padding: 0px 14%;
}
#media (max-width: 768px) {
.img-wrapper,
.content-wrapper {
width: auto;
float: none;
height: 175px;
}
}
<body>
<div class='signup-form-wrapper'>
<div class='img-wrapper'>
</div>
<div class='content-wrapper'>
<p>Hello, World!</p>
</div>
</div>
</body>
Related
I'm trying to get my logo to become responsive.
Here's a fiddle, and the logo there IS responsive, but on my local machine it's not responsive...
https://jsfiddle.net/jfzqbshs/
Here's a GIF showing my local machine
GIF
HTML
<div class="header">
<img id="logo" src="assets/logo.png">
</div> <!--/ header -->
CSS
.header{
width:100%;
box-sizing: border-box;
padding-left: 1%;
padding-top:1%;
padding-bottom: 1%;
border-bottom: 1px solid #474547;
}
#logo {
display: block;
max-width: 100%;
height: auto;
}
Thank you.
Your image is rather small, so it will never reach the 100% width if you use max-width.
You can use something like this:
#logo {
width: 25%;
min-width: 100px;
height: auto;
}
That makes it responsible (25% width), but also limits it so it never gets smaller than 100px width. You could also add a max-width (in pixels) to avoid that it gets bigger than it actually is (which would result in a blurry image at bad quality)
.header {
width: 100%;
box-sizing: border-box;
padding-left: 1%;
padding-top: 1%;
padding-bottom: 1%;
border-bottom: 1px solid #474547;
}
#logo {
width: 25%;
min-width: 100px;
height: auto;
}
<div class="header">
<img id="logo" src="http://placehold.it/200x60/eb7">
</div>
<!--/ header -->
Do You use bootstrap or other CSS library? Maybe Your img is overwritten somewhere in Your code?. Try this to check:
.header img {
display: block;
max-width: 100%;
height: auto;
}
or even:
img {
display: block;
max-width: 100%;
height: auto;
}
and put in on bottom of CSS file.
I have this html code:
<div id="home-page"> hello from home</div>
<div class="home-page top-div">
some text
</div>
<div class="home-page bottom-div">
other text
</div>
This is the css:
#home-page {
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
}
What I want to get is a page split in two parts horizontally, the top part in one colour and the second one in another colour. I tried this but it has no effect on my page.
Does anybody know what I did wrong? Thanks
I think you should define #home2-page also as
#home2-page{
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
}
Using percent in height is dependent on parent div height. If no height is set in the parent div, then height has no meaning.
The same is true for the parent. If you use a percent-height (or no height depending on HTMLElement.style.display) in the parent element, then it's parent needs to have a fixed height. All the way up to the html-element, which you can set to 100% height (and then it should work). html{ height: 100% }
Anyway, that is a silly way to do things, so I suggest you use something slightly more modern instead; The vh vw units (viewport height, viewport width). One vh unit is 1% of the viewport height. Thus, you can replace 50% with 50vh and it'll be something closer to what you wish for.
.top-div {
height: 50vh;
}
Try This:
html,body {
height: 100%;
}
html,body {
height: 100%;
}
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="home2-page"> hello from home</div>
<div class="home2-page top-div">
some text
</div>
<div class="home2-page bottom-div">
other text
</div>
Like #C Travel said, you can't use nested CSS meaning you can't put a class inside a class. You can accomplish your goal by simplifying your code a bit. Checkout my working example below:
CSS:
<style>
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
</style>
HTML:
<div class="top-div">
<p>hello from home</p>
<p>some text</p>
</div>
<div class="bottom-div">
<p>other text</p>
</div>
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I've been search for more than a day a way to vertical align my fluid designed header so without knowing font-size nor spesific pixels my 3 divs will be the same height and the content inside them in the same line.
Here is an fiddle example of what I have now so you might understand what i need better.
And this is the code:
HTML:
<div id="container">
<div id="header">
<div id="menu">
<a href="#">
<img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
</a>
</div>
<div id="title">
My site title
</div>
<div id="my_button">
<button id="button">My button</button>
</div>
<div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>
CSS:
html,body {
height: 100%;
font-size: 2vmin;
}
#container {
height: 100%;
min-height: 100%;
}
#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}
#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}
#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}
div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}
#content {
height: 70%;
width: 100%;
background: #eeeeee;
}
You can use :after pseudo element for solving your problem.
add this after #header styles in your CSS
#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}
Then remove floats from #menu, #title and #my_buttun div's and apply
display: inline-block;
vertical-align: middle;
The inline-block will create small gaps between these div, but if you're not apply background colors to them , then it is ok.
Last: make #my_button width: 19%;
Look here: http://jsfiddle.net/D22Ln/5/
If you mean the three horizontal divs, setting height: 100%; for all of them will do the trick. From there you just modify the size of their parent element (currently at 20%) and they will adapt automatically.
http://jsfiddle.net/D22Ln/2/
If I have understood you correctly this is maybe what you are looking for, I just copied that I have done earlier. But test it out: http://jsfiddle.net/6aE72/1/
By using wrapper and a helper you will have the left and right div same size as middle and helper helps with vertical alignment
#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }
This FIDDLE might help you. I've used bootstrap framework. Re-size the RESULT grid.
I'm now trying another strange and not working thing: the vertical auto alignment of a child div.
I would like the content to be vertically centered within the panel, because the panel have a height in % that fits the window size, it's really important for me to have a strict alignment.
All right, here's my code: JSFiddle
HTML
<div id="panel">
<div id="content">
</div>
</div>
CSS
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: auto;
background-color: rgba(255,255,255,0.3);
}
#content
{
height: 100px;
width: auto;
background-color: rgba(117,169,56,0.9);
}
Why a so simple thing doesn't work?
Hope someone could help me, I've tried these solutions: margin : auto not working vertically? but it actually didn't make the trick
Here is a simple Solution for vertical aligning, using Pure CSS without fixing any top-margin, top-padding. so its totally responcive.
See this Working Fiddle
HTML: (Same)
<div id="panel">
<div id="content">
</div>
</div>
CSS:
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
}
/*this is new*/
#panel:before
{
content: '';
height: 100%;
margin-left: -5px;
vertical-align: middle;
display: inline-block;
}
#content
{
vertical-align: middle; /*this is new*/
display: inline-block; /*this is new*/
height: 100px;
width: 100%; /*this is new*/
background-color: rgba(117,169,56,0.9);
}