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.
Related
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?
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
any help here would be great.
I'm simply trying to place a header that stretches 100% of the screen. Inside this header is another div containing text. What i have looks fine at full screen, but when i resize down the text stacks on top of each other to accommodate the percentage.
If i set the container width to pixels instead of percentage, the header doesn't stretch the full length of the window unless i specify an exact pixel amount like 1463px - this doesn't seem right because while it may be appropriate for my laptop/screen dimensions i feel like it wouldn't work on a bigger screen with a maximized window.
I just want everything in my container to be able to be positioned according to the 100% of the browser width and height, but using percentages isn't allowing me to fix the elements so they stay put during resize. I've been working with percentages mostly and am having great difficulty keeping them fixed on resize as opposed to pixel dimensions, basically because using percentages is ensuring that my content is taking up 100% of the browser window, whereas I can't be sure with this when using pixels.
html, body {
height: 100 % ;
width: 100 % ;
padding: 0;
margin: 0;
}
.container {
width: 100 % ;
height: 100 % ;
margin: 0 auto;
}
#
topbar {
height: 25px;
background - color: #000000;
width: 100%;
}
# topbartext {
font - family: times;
color: #ffffff;
font - size: 11px;
text - align: center;
padding: 5px;
}
The text is what is moving during resize - when I make the window smaller the text just stacks on top of eachother in order to still fit the screen. I don't want it to do this - i just want it to be fixed and not resize.
HTML :
<body>
<div class="container">
<div class="header">
<div id="topbar">
<div id="topbartext">$10 SHIPPING TO THE USA FOR ALL ORDERS OVER $150*++ FREE SHIPPING AND RETURNS ON AUSTRALIAN ORDERS OVER $50* ++ *FULL CONDITIONS
</div>
</div>
</div>
</div>
</body>
Percentages is best for this.
If you want the text to remain in one line you can add the following to your html and css:
html...
<div id="topbartext" class="topbartext">
css...
.topbartext {
white-space: nowrap;
}
Note that:
In css it is better practice to use a class (.topbartext) rather than the id (#topbartext).
Using this method will mean that if you make your page narrower than the text you will have a horizontal scrollbar added (not ideal). You are probably better off allowing the text to wrap in which case you will need to remove the height: 25px;.
As suggested above you could use css media queries. That will take some googling to learn.
If I'm understanding you correctly you can also use a min-width: 820px on the body. This will ensure your body never gets below a certain width it will provide a horizontal scrollbar if it gets smaller than that.
html,body {
min-width: 820px;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Demo Fiddle
Demo Fiddle Fullscreen
You can use media queries to alter the content styles based on parameters like screen size.
Here's a demo using your example that shrinks the text and allows the #topbar to expand when the screen is smaller than 800px wide (when the text starts to wrap).
For instance:
/* Normal styles that apply all the time*/
p {
font-size:1em;
}
/* Media query that applies if the display media is a screen
and the condition between the brackets is met */
#media screen and (max-width:600px) {
p {
font-size:0.6em;
}
}
You are trying to fit in a lot of text though, you may be better off allowing the surrounding div to expand by removing the fixed height:
#topbar { height:25px; };
If you want to fit all your content on a small screen, this is probably the way to go.
Have you tried using JavaScript? I am not sure what you want since you are setting the top bar container to have fixed height which means the text will be out of the container if you do not resize the height. Here is some script to force the width (or height) to full window size (I had trouble with percentage also):
function resizeTopBar() {
var width = window.innerWidth;
var height = window.innerHeight;
var target = document.getElementById("topbar");
target.style.width = width + "px";
}
window.onresize = function() {
resizeTopBar();
}
The script will not change the way it works (the text will stack on each other) since you never change the height. If you want the height to wrap, remove height: 25px; from topbar.
Screenshot:
You can try this:-
#topbartext {font-size: 1em;}
#media only screen and (min-width: 320px) and (max-width: 479px){
#topbartext{ font-size:25%;}
}
#media screen and (min-width: 480px) and (max-width: 767px){
#topbartext{font-size:50%;}
}
#media only screen and (min-width: 768px) and (max-width: 959px){
#topbartext{ font-size:50%;}
}
#media screen and (min-width: 960px){
#topbartext{ font-size:70%;}
}
#media screen and (min-width: 1280px){
#topbartext{ font-size:100%;}
}
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.