I'm trying to create 3 divs with the middle div having 2 divs inside side by side. The issue I'm having is that at screen size >768px the 2 divs inside are being squished rather than 100% width? Any help is greatly appreciated!
https://jsfiddle.net/z3q2wtLf/embedded/result/
The below code is an example of what I'm trying to achieve but there something I'm not catching in the fiddle above thats preventing the below result.
#panel1 {
width:100%;
height:100px;
text-align:center;
background: #000000;
}
#container {
width:100%;
text-align:center;
}
#left {
float:left;
width:50%;
height: 20px;
background: #ff0000;
}
#right {
float:right;
width:50%;
height: 20px;
background: #0000ff;
}
#panel2 {
width:100%;
height:100px;
text-align:center;
background: #000000;
}
<div id="panel1">
</div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="panel1">
</div>
Give this a look: https://jsfiddle.net/z3q2wtLf/29/embedded/result/
I switched the media to:
#media only screen and (min-width: 768px) {
body { display: block; }
}
On the container CSS, I added: min-height: 460px !important; (The "important" notation may be unnecessary, but it worked and I didn't bother testing without it.)
Then in your actual HTML, I fixed a spelling error where you wrote "containter" instead of "container"
And, finally, I switched #panel1 to .panel1 and changed the top and bottom divs to <div class="panel1"></div> instead of <div id="panel1"></div>. In HTML, you are NEVER supposed to give two elements the same ID. Hence why I changed the ID to a class. (You can reuse classes as much as you want.)
In your CSS, you have a line:
#media only screen and (min-width: 768px) {
body { display: flex; }
}
This is the cause of your issue.
To go off of what QuestionMarks said
#media only screen and (min-width: 768px) {
body { display: flex; }
}
Instead of it using flex to display your divs, you need to use this one:
#media only screen and (min-width: 768px) {
body { display: inline-block; }
}
The key here is using display: inline-block; to display divs side by side.
Related
How do I setup HTML/CSS to have my DIV follow the screen size for width, but stop expanding once it fits the contents (it should scroll left/right when the div cannot fully contain the contents).
Pseudo-Code:
HTML:
<div class="image-container">
<img width="1000">
</div>
CSS:
.image-container {
/* ??? */
display: inline-block; /* ??? */
overflow: auto;
}
EDIT: Per Evadore's answer, I was able to come up with the following CSS.
.image-container {
display: inline-block;
overflow: auto;
}
/* optimize these px dimensions, 900 worked for my application */
#media (max-width: 900px) {
.image-container {
max-width: 710px;
}
}
/* redundant, I plan to tweak this range later */
#media (min-width: 901px) and (max-width: 1575px) {
.image-container {
max-width: 710px;
}
}
#media (min-width: 1576px) {
.image-container {
max-width: 1385px;
}
}
The following reference also helped: w3schools
Use CSS Media queries to setup for various screen sizes.
view source code of this page to see how media queries were used.
for this set the parent div width to fit-content and max-width to 100%. now the parent div will remain between the width of the content and the with of the screen if the screen size is not enough. And lastly for scrolling inside the parent div on the small screen devices put overflow:scroll.
Here is the Codepen demo
.parent {
background-color: green;
width: fit-content;
max-width: 100%;
overflow: scroll;
}
.child {
padding: 30px;
width: 700px;
background-color: red;
color: #fff;
}
<div class="parent">
<div class="child">
test string
</div>
</div>
ps: I've added bg colors just for reference purposes, to show whether the parent component is expanding or not.
This question already has answers here:
Left column and stacked right column using flexbox CSS [duplicate]
(2 answers)
Closed 2 years ago.
For the mobile version I want the title to be on top -> then the carousel -> then the form. For the desktop version I want the carousel to be on the left half of the screen and the title and form to be on the right side of the screen and stacked.
#top {
width: 50%;
background-color: red;
height: 10vh;
float: right;
}
#middle {
width: 50%;
background-color: green;
height: 30vh;
float: left;
}
#bottom {
width: 50%;
float: right;
vertical-align: top;
background-color: blue;
height: 15vh;
vertical-align: top;
}
html,
body {
margin: 0;
padding: 0;
}
#media only screen and (max-width: 375px) {
#top,
#middle,
#bottom {
width: 100%;
}
/* STYLES GO HERE */
}
<div id='container'>
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
A easy way, but not really a recommended way, is to put all your elements in a grid. Here is some more information about grid for css: https://css-tricks.com/snippets/css/complete-guide-grid/
An other way with more customization opportunities is by making duplicate versions of your HTML, and changing the layout on one of the versions to match your mobile layout. And by giving both of the versions different classes you can realy easely change what layout is visible at what time.
For axample:
<body>
<div class='desktop'>
//desktop layout
</div>
<div class='mobile'>
//mobile layout
</div>
</body>
<style>
.mobile {
display: none;
}
.desktop {
display: block;
}
#media only screen and (max-width: 900px) {
.mobile {
display: block;
}
.desktop {
display: none;
}
</style>
I am trying style a div so that its width decreases after a certain point wrt to the width of the viewport.
Here is my code:
<div data-category="budget" class="hotels-block active ">
<img src="images/budget1.jpg">
<div class="info-block">
<h2>BUDGET HOTEL 1</h2>
<p>fist line, second line, USA, third line comes over here</p>
<hr/>
BOOK NOW
</div>
</div>
CSS :
.hotels-block {
overflow: hidden;
margin-bottom: 30px;
}
.hotels-block img {
float:left;
}
.info-block {
width: 320px;
float: left;
display: inline-block;
background-color: #62bcb1;
text-align: center;
color: #FFF;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
#media screen and (min-width: 961px) and (max-width: 1050px)
{
.info-block
{
width: 30%;
}
}
I want the width of the .info-block div to reduce until the viewport width hits 961px.
Currently, .info-block shrinks until 977px and then falls to the next line.
How do I prevent .info-block from going to the next line? No JS/JQuery please.
you want to use min-width and max-width properties? usually as absolutes and then set the standard width to a percentage. Also set the width in the media query to !important to supersede the pre-set arrangement.
#media screen and (min-width: 961px) and (max-width: 1050px)
{
.info-block
{
min-width:200px;
width: 30% !important;
max-width:400px;
}
}
I am attempting to implement a responsive layout based on the exmaples and code here: www.responsivegridsystem.com
I have wrapped it a couple of containers as I need a 960px content area centered in a 1000px container.
My intent is that with a width smaller then 960px, both containers just become 100% width. The layout is exactly what I want at full size, but it is not shifting like I want when smaller then 960px.
Current CSS (with some edits based on suggestions, still not working.):
.masterContainer {
position:relative;
margin:0 auto;
margin-top:-10px;
background-color:#FFF;
width:1000px;
overflow: hidden;
}
.pageContainer {
position:relative;
display:table;
margin:0 auto;
width:960px;
overflow:hidden;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 70%;
}
.span_1_of_3 {
width: 30%;
}
#media only screen and (min-width: 481px and max-width: 960px) {
.masterContainer {
width:100%;
}
.pageContainer {
width:100%;
}
}
#media only screen and (max-width: 480px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 100%;
}
}
HTML
<div class="masterContainer">
<div class="pageContainer">
<div class="section">
<div class="col span_3_of_3" id="header">Header
</div>
<div class="col span_3_of_3" id="slideshowContainer">Slideshow
</div>
</div>
<div class="section group">
<div class="col span_2_of_3" id="contentArea">
This is column 1
</div>
<div class="col span_1_of_3" id="rightColumn">
This is column 2
</div>
</div>
<div class="col span_3_of_3" id="footer">Footer
</div>
<div class="col span_3_of_3" id="bottom">
</div>
</div>
</div>
Is something wrong with my #media code or did I break it somewhere else?
Your media queries are telling IDs to do something, while your HTML has them as classes. Change it to something like this:
#media only screen and (max-width:960px){
.masterContainer {width: 100%;}
.pageContainer {width: 100%;}
}
Here is a fiddle with your code and the query. I gave them background colors for the example.
JS Fiddle with your code
From what you've posted there is no #media codes... You cannot have a specific width's set if you intened for the page to be responsive ex. masterContainer width 1000px.. youll need to redo that for example:
#media (min-width: 700px), handheld and (orientation: landscape)
{
.masterContainer{
width:60%; // or whatever you may need
}
}
have a look at some examples.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You need to specify it via #media queries:
#media screen and (max-width: 959px) {
.masterContainer,
.pageContainer {
width: 100%;
}
}
You dont have media queries in your css.
Create separate files for diffrent screen sizes and put styles in there. Thats the easiest way.
And read this article. It will help you to understand how media queries work.
csstricks media queries
The reason it doesn't work is this:
#media only screen and (min-width: 481px and max-width: 960px) that is a wrong query.
It should be:
#media screen and (min-width:481px) and (max-width:960px)
You can't combine the min and max like you had it.
I have a simple setup like this :
<div id="div0">
<div id="div1">Content</div>
<div id="div2">Content</div>
</div>
The two middle divs(1,2) have width:100% and max-width:390px plus floatLeft. When resizing the browser div2 will jump a row down and when getting less then width 390 thay will both start to resize.
What I need is to resize to a min-width first and then jump down to the second line.
How do I do that?
Edit1 : example : http://jsfiddle.net/dwDZx/
Here's a responsive example of what you're asking about. I changed some widths to make it easier to follow the example and see where the numbers come from. http://jsfiddle.net/dwDZx/4/
I change background colors in the different responsive layouts to show you which section is active at which point in resizing the browser.
The only change I made to the markup was to create a "content" div inside div1 and div2. This allowed me to set a border. If I set width of div1 and div2 to 50% AND set a border, then the total width would be 50%+2px (1px left + 1px right) which would cause the floats to wrap. By putting the border on the content div, it puts the borders inside the 50% instead of outside.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#div1, #div2
{
float:left;
}
#media (min-width: 801px)
{
#div1, #div2
{
width: 400px;
background: green;
}
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
width: 49.9%;
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
}
}
EDIT: I thought about it and simplified things a bit. See http://jsfiddle.net/dwDZx/5/ The CSS changes as follows: set a max-width on the parent div to be the max width of div1+div2. Then you only need one media state: for when it's < 400px and should be on one line.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#container { max-width: 800px; }
#div1, #div2
{
float:left;
width: 50%;
background: green;
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
background: blue;
}
}