To explain it in a short way, this is what I'm trying to achieve: http://www.bootply.com/Muh7eahFC8#
A responsive design, with three columns, and a button at the bottom of each column.
The problem is that I'm setting the height of the columns manually, and I'd like the whole thing to automatically adapt to the longest content of the three column.
Right now, I'm setting a different height based on the size of each viewport:
#media only screen and (min-width : 992px) {
div {
height: 180px;
}
div a {
position: absolute;
bottom: -40px;
}
}
#media only screen and (min-width : 1200px) {
div {
height: 140px;
}
}
(Give it a try on different screen width)
I think that what I'm trying to achieve is pretty common. Isn't there a smarter wayt to achieve it?
-- edit
With #DavidG help I could fins a responsive solution: http://www.bootply.com/7C2WvyxNyZ
unfortunately hte 33% is hardcoded, if I change the number of columns I'll have to update the css, and I found NO WAY to center the buttons in each column
Can't remember where I got this snippet from but this will make your columns the same height:
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
Then with a couple of tweaks, you can force the anchors to be fixed to the bottom of the div.
http://www.bootply.com/crLlXiiKqk
Related
I'm a newbie to web development. I'm using react to create a responsive split screen signup page, but when I adjust the height of the screen size, the form can not be shown entirely. Does anyone know which part of my css is wrong or missing?
Image: https://i.stack.imgur.com/WCv6I.png
The code is on the sandbox. https://codesandbox.io/s/immutable-bash-19wgq?file=/src/components/SignUp.js
2 important things to notice:
100vh as a height will give the element the height of the browser's window
overflow: when an element is higher than it's parent element, if the overflow is set to hidden, part of the content may not be visible.
I added a rule at the bottom regarding the screen height as such(here just for demo):
#media screen and (max-height: 500px) {
.split-screen {
flex-direction: row;
height: 100%;
}
.sign-up-container .right {
display: flex;
width: 50%;
height: 100%;
overflow: visible;
}
.sign-up-container .left {
min-height: 500px;
}
}
I have 100% height and width container, then means if the resolution of the any screen is 100%, then the elements inside of the container is compressing if the resolution is not compatible in my position design, I want to have a responsive container with responsive elements inside of it but the elements will not compress. (Example try to resize the stackoverflow website, the elements is still the same.)
Here's my example code:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
<div class="container">
<h1>Responsive Container</h1>
</div>
I am not sure about what is actually needed, if you want to restrict the elements from not being responsive above or below a particular value, you need to fix the container element to a fixed pixel width when the width is less/greater than particular screen value using media queries.
Refer CSS Media Queries
CSS:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
#media only screen and (max-width: 500px) {
.container {
width: 500px;
}
}
In the below JSFiddle you can see that the elements is set to fixed width (500px) when the screen width is less than 500px.
JSFiddle Demo
Here's the page: https://hamzicabdulah.github.io/Raptitude/
The divs with the "other-stories" and "footer" classes overlap when the height of the "other-stories" div is set manually:
.other-stories {
height: 65%;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
}
}
If I remove the above code, the divs don't overlap. What's the workaround here, considering the manually set height of the "other-stories" div needs to stay there in order to work fine in Firefox?
Set Float to footer and other stories.
.other-stories {
height: 65%;
float:left;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
float:left;
}
}
It overlaps, because the <div>s in your <div class="other-stories"> are overflowing out of the div itself.
Why do you have a fixed height on other-stories what functionality are you trying to gain? Also, is there a particular reason you are using height %s?
With flex is a little tricky. I suggest to change all, remove flex display and use bootstrap grid. Do you know?
I have two boxes, each with width: 50%;, placed next to each other with float. One has a white background, the other a grey background.
As the page width shrinks the boxes stay beside each other. At some minimum size I don't want the boxes to get any smaller. Here they should jump down under each other.
They do this fine. But the white and grey boxes keep their 50% width - at this point they should rather fill the whole width 100%.
The issue is seen here just below the video.
(The min-width does not do any difference here at the moment, and is just set to some arbitrary value (100px) on the page.)
What is the proper way for this responsive effect, so the products are full-sized on small screen but can stand beside each other on large screens?
I find it easier to approach this from a mobile-first setup. Set the boxes to 100% width until the breakpoint where you want them to start forming columns. For example,if you wanted them to start forming columns at 600px device-width and greater:
.column_selector {
box-sizing: border-box;
width: 100%;
}
#media all and (min-device-width: 600px) {
.column_selector {
width: 50%;
}
}
Also, if you're going to use percentages for widths, I'd recommend using box-sizing: border-box to account for the padding in your width calculations.
Use #media to set some special rules for different window dimensions. Something like:
.div1 {
float: left;
width: 50%;
}
.div2 {
float: left;
width: 50%;
}
#media (max-width: 600px) {
.div1 {
width: 100%;
}
.div2 {
width: 100%;
}
}
Here's a fiddle.
i am creating a responsive web design containing images....i want to know if there is any way i can crop images when they overlap i.e if i have two images in one line image 1 and image 2
image 1 is at the left and image 2 is at right and i start lessening width of my browser, and when image 2 reaches image 1, image 2 starts cropping or hiding or whatever....how m i going to do that?
here is my code for what i am trying:
#logo{
float:right;
margin:88px 0 0 70px;
position:absolute;
}
#header-add{
float:right;
margin:35px -10% 0 0;
cursor:pointer;
}
Logo is image 1 and header-add is image 2
Rather than crop the image, I'd suggest simply setting your CSS to set the width of the images appropriately when the browser width is decreased. This way you don't have to worry about cropping.
For example (values arbitrary, but percentage-based, which I find best for responsive design):
#media screen and (max-width: 768px) {
#header-add {
width: 40%;
}
}
#media screen and (max-width: 480px) {
#header-add {
width: 25%;
}
}
If you don't want to set the width of the images via CSS, you can essentially "crop" the images if you enclose each of them in a div and you can set overflow:hidden on the div, and then set the width of the div in the CSS (like the aforementioned image width example).
Hope it helps!
Addition:
In answer to your comment about cropping from the left, here's how I would recommend doing it. The downside is that you have to add an explicit height on the div that crops the image, but it should work for you.
The HTML:
<div id="crop_div">
<img src="foo.jpg" alt="bar" />
</div>
The CSS:
#crop_div {
float: right;
height: 100px; /* Needed since contents use absolute position */
overflow: hidden; /* To crop the img inside of it */
position: relative; /* Set for img position below */
width: 400px;
}
#crop_div img {
position: absolute; /* To anchor it on the right */
right: 0;
}
#media screen and (max-width: 768px) {
#crop_div {
width: 40%;
}
}
clip() and overflow: hidden for masking for sure your content.
min-width and/or max-width to manage the width of each div when the sum of both would be too large for the width of the container.