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?
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 am working on a web site.
On min-width: 769px and max width of 1203px I was trying to remove the float for two divs so I can make it a full width option for both divs is:
Since I am using a page builder I tried to use my inspector tool on Chrome and search for appropriate classes or div that can do the trick and I pull the ff codes:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column_inner.pbuilder_droppable{
width: 100%;
display:block;
float: none;
}
}
But for some reason it doesn't do the trick. Am I doing it wrong?
Hi just remove width: 50% in or replace it with 100% instead:
.pbuilder_column.pbuilder_column-1-2{
width: 100%;
}
The following CSS properties:
float:none;
width:100%;
on the divs which classes are pbuilder_column pbuilder_column-1-2 (in the hierarchy, they are right below pbuilder_row_colwrapper ).
So, the code would be:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column{
float:none;
width:100%;
}
}
It does the trick, from my inspector at least.
Just use the class .pbuilder_column instead of .pbuilder_column_inner.pbuilder_droppable.
body,
#pbtheme_wrapper{
overflow-y: visible !important;
}
.pbuilder_column.pbuilder_column-1-2{
width: 100% !important;
}
You have to add below css:
#media screen and (min-width: 769px) and (max-width: 1203px){
.pbuilder_row_colwrapper .pbuilder_column {
float: none;
display: block;
width: 100%;
}
}
To me the real problem comes from the way you add your paddings to your elements. By removing or adjusting a lot of them, I was able to achieve it and increase the responsiveness (try to play around margin more than padding in some situations)
The main thing here, is not that your field aren't taking 100% of the container space, it's your button that overflows the container because of a 170px padding (with a !important, which is something I really don't recommend) so it seems like divs aren't taking the right amount of space.
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
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 have a div (content area) with an image background, now if the div height extends to more than 600px I would like to display a different background image. Is that possible with just CSS?
here is an example i am giving, try changing the height of the result window to see the change:
.facet_sidebar{
background: url('http://www.hexaware.com/brandresourcecenter/images/images_compass.png');
height: 100px;
width: 100px;
}
#media (max-height: 600px) {
.facet_sidebar {
background: url('http://www.hexaware.com/brandresourcecenter/images/images_gears.png');
width: 100px;
}
}
jsfiddle demo
Media queries can be used to change anything.
Hope it helps
Simple answer: No.
More complex answer: It depends. For example you could set the height of the div-container relative to the height of the viewport and resize that. At some point the div will grow to a height > 600px. You could then watch out for the height of the viewport and base a media-query on the value.
#media (min-height: viewport-height when div is 601px high)
your styles {}
}
If that solution is not what you are looking for, then you have the option of looking for the height of the div with JavaScript and thereby swap the background image.
yes it is possible through the media inquiry
#media screen and (max-device-width: 768px) {
.div {
width: 960px;
background: url(...);
}
}