I've been working on a website and have been struggling with CSS (I had originally accomplished my goal with JavaScript, but I was having many cross-browser-compatibility issues).
I have 4 uls in a footer which I want to align based upon the screen size.
I set their width properly based on the screen size:
#media screen and (min-width: 1281px){/*lg*/
/*sm*/
.cmc-grid-sm-1 {
width: 8.33333%;
}
. . .
Yet it appears to be the wrapping of the elements within the parent container which I am having a problem with.
What I would like them to look like is this:
And instead, they end up looking like this:
I've highlighted the borders of the elements with red to show how they are aligning
What can I add to my CSS to make these DIVs align they way I would like them to (I've been looking everywhere for my answer!)?
Here is my JSFiddle!
Now i know this is a little bit of a dirty hack and it wont cover every possibility but give this a try out:
#media screen and (min-width: 482px) and (max-width: 1024px){
...
.cmc-column:nth-child(3n+3) {
clear:left;
}
...
}
It works in your current situation but dont hold me to it when it comes to adding more columns etc.
JSFiddle
It works as the 3rd div then expects to have nothing to its left pushing it to the left and putting it below the other 2 divs.
Just use the display: table; for the container and the display: table-cell; or the display: table-row; for your inner divs:
.container {
display: table;
}
.column {
display: table-cell;
}
Take a look at the example here and apply it to your code.
Related
In my previous question I asked a similar question but was using the bootstrap framework. I want to be able to create a responsive page without using bootstrap because I don't really like the grid system.
I have two divs that are centered horizontally and vertically. I would like for it to be responsive and stack up on top of each other when the window is minimized. My code on CodePen. I've attempted it a few times and I still not sure how to approach it:
#media only screen and (max-width: 768px){
#about #aboutInfo{
border: solid;
float:none;
text-align: center;
width: 100%;
}
#about #aboutInfo{
float: none;
width: 100%;
}
}
I've already solved your problem in the previous post but ok. First of all, I advise you to stop using floats because floats are history and float: none; does nothing because by default elements don't float like you have it written in your codepen. Second, I recommend you to take a closer look at Flexbox and the possibilities it brings because it really shines when it comes to responsive web design/development.
So again, solve the problem by adding the below code to your media queries:
#about {
flex-direction: column;
}
And also like I told you before it's always good to use some basic CSS browser reset:
* {margin: 0; padding: 0; box-sizing: border-box}
If I understand you right, you should add
flex-flow: row wrap;
or
flex-wrap: wrap;
in #about.
The reason it's not stacking is because you're separating your content with div tags. Make the section a col and style them like here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
In bootstrap, there is a row tag that acts like a div tag. But each of the columns are litterally "col-**" with styling behind them.
I am designing a component for a website which is one solid inline block. It currently looks fine on a normal sized screen but when the screen gets smaller things get weird. I have tried using a media query to change some of the CSS properties to get all the divs to fall in line vertically. This doesn't seem to be working.
Also, there is an extra 10px on the bottom of this block which I have tried to remove in numerous ways and it doesn't disappear unless I set the height a solid 300px on the larger outer div. Right now I am trying to use the calc function to remove it but with no luck. If someone knows the fix to that too it would be awesome.
Here is the current media query:
#media (max-width: 500px){
#orange-block-right, #orange-picture{
float: left;
display: inline;
}}
Here is the link to the jsfiddle which will demonstrate my woes. If anyone could let me know what the issue is I would be very appreciative.
First of all you need to reset your left margin and width in the media query:
#orange-block-right {
width: 100%;
margin-left: 0;
}
Similar for the other elements.
Apart from that, erase those float and inline properties, define all these elements as blocks and center their content.
I have 2 boxes (About Us and Contact Us) that don't change (stack) when you resize the browser. I've checked the forums and it looks like I need either a clear:both or overflow:hidden. My problem is, I've tried both of those anywhere I can think of and nothing happens.
So far, I've tried overflow in the wrapper, box1 and box2. As well as paragraphs 1-3. I've also tried clear in pretty much every spot around/in/under the wrapper div in my HTML.
When the browser reaches the 768px breakpoint, you need to change the div's display mode to block so that it doesn't allow any other item in its horizontal space.
#media (max-width: 768px) {
#box1 {
display: block;
width: 60%; /* Set according to your requirement */
}
}
Output:
JSbin
I have been trying to figure this out, but am unable. I am looking for a way (through coding html/css) to "float" a div element up as the browser window's width is decreased.
Here is the browser window at full width with the div elements side by side.
After resizing (decreasing browser window width), I'd like for the 2nd div element to "float" above the 1st div element.
I would appreciate any help. Thank you.
UPDATE: First, thank you all for the help. After reading/trying recommendations, I am looking for a solution that is functional across all browsers. Also, the elements will be dynamic images. And, it doesn't have to be strictly limited to html/css, but the most simplistic implementation is always appreciated! :) Thank you again for your input and help.
Just place the second div first in your code like this:
<div id="second"></div>
<div id="first"></div>
And add float: left; attribute to the first div with CSS. You won't need jQuery for that:
http://jsbin.com/ERutocO/1/
You need to put number 2 in front of number 1 in your html code, then use float: right on both of them.
http://jsfiddle.net/4sCrQ/
If you want only CSS answer then you will need to use CSS3's media queries which word depending on the screen type and its size!
Use this :
#media only screen and (max-width: 900px;) { // screen size 900px
// if screen size 900px then position them here as
.div1 { // first div
margin: 10%; // margin
}
.div2 { // second div
// whatever property
}
}
And when the size decreases to lets say 500px width then
#media only screen and (max-width: 500px) { // if screen size is 500px
.div1 { // first div
// position it above,
}
.div2 { // second div!
// position it below by using min-width attr, and by adding paddings..
}
}
Good luck!
For more: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries (Mozilla Developer's Network)
Float the blue div left, the yellow div right. Demo
#yellow {
float: right;
height: 30px;
width: 200px;
background: yellow;
}
#blue {
float: left;
height: 30px;
width: 200px;
background: blue;
}
Here is a demo
While making this example some answers where posted here, and they are almost simular to my, so excuse me for duplication, but here is another possible solution.
I've reorder the div's and add float: right; instead of left.
This is my scenario:
I have a fixed-positioned DIV element (lets call it 'wrap'). It must not overflow the margins of 100px from the window's edges.
Inside this div reside 3 other DIVs ('first', 'second', and 'third').
Only the 'third' DIV has a fixed height and should always be positioned at the bottom of the containing 'wrap' DIV.
The issue is that I want the 'wrap' DIV to occupy as less possible height of the screen. I want it to shrink its height if 'first' and 'second' are fully shown, and scroll 'second' if they don't.
I find it kind of hard to explain, so I hope you can get the idea.
Ask me anything if you need any clarifications.
I've created a pen for it on CodePen that you can fork and play with.
I can't succeed in achieving this without JS.
I'll really appreciate your help...
Thanks.
You can create custom styles for varying screen sizes using #media in your style sheet like
#media screen and (max-width: 800px) {
#wrapper {
width: 90%;
min-width: 0;
}
#column-main {
margin-left: 0;
}
#column-sidebar {
width: auto;
float: none;
}
}
Visit here for a better explanation.