I'm trying to make some html code mobile-first, so I've stuck an #media to test for "desktop" widths (arbitrarily set to 45em in my sass at the moment). The idea for the two divs (#picture-block and #question-block) in question is:
$desktopwidth: 45em
#question-block, #picture-block
width: 100%
#media (min-width: $desktopwidth)
#question-block, #picture-block
width: 50%
float: left
Despite clicking around in my code inspector, I can only get my two divs in question to float left side-by-side when I kill both width properties (50% and 100%). I'm confused by this, because I thought display: block would have been the default, and I don't understand why the width property would affect the float. I'm using the jquery-mobile framework, but I can't see how it would be interfering in the code inspector.
I've created a codepen link to try to replicate the problem. My question: what do I need to do to the css to get the picture-block and question-block divs to float next to each other for desktop widths?
In the codepen, you also have a 1px border around the blocks. This causes the total width of each to be 50% plus 2 pixels. So two of them won't fit side by side in a 100% container!
Possible solutions:
either give them box-sizing:border-box to include the border width in the width
or, set the width as calc(50% - 2px)
(but not both.)
Related
Need some help figuring out why the bottom images keep pushing out. I have a responsive grid layout and developing a personal webpage. Images are setup to display in a 4 column layout with a media query set up to change to a 2 column layout # 800px. When I resize the browser width by dragging the edge, the layout breaks then resolves itself on and off every few px the window is reduced by. E.g. at 800px the layout is good, 799px it breaks, fine at 797px and so on. Why is this happening?
Link to the page HTML and CSS
<p data-height="265" data-theme-id="0" data-slug-hash="VMeJMq"
data-default-tab="css,result" data-user="smedz28"
data-embed-version="2" data-pen-title="Media query breaking"
class="codepen">See the Pen
Media query breaking
by Marc Smedley (#smedz28)
on <a href="https://codepen.io">CodePen
</a>.
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js">
</script>
codepen
As the images in the codepen have no source, it is not possible to replicate the behavior.
Using the DOM inspector, all images have max-width:100% property defined. Due to the CSS Box Model, this might lead images to be greater than 100% width, as they also have border:3px set.
Try adjusting the max-width to compensate for the borders:
img {
max-width:calc(100% - 6px);
}
or
img {
max-width:calc(100% - 6px) !important;
}
If you need to force an override of other selectors.
So it looks like jae.phoenix was correct with the image size in a way, it wasn't so much the container size and HTML/CSS. It was the actual image sizes that were breaking the layout.
I resized all images and the layout seems to be working perfectly
Reduce the width of your images to see if that solves your problem? – jae.phoenix
I made a basic HTMl page with a sidebar and a content area. My problem is my content area is not not positioning correctly across screen sizes. Specifically, the distance between my sidebar and page content is smaller on a small screen than a larger screen. This is despite the fact that my sidebar's width is 150px and i set the margin-left attribute for my page_content to be also 150px.
Here is a screenshot of the smaller screen:
Here is a screenshot of the larger screen:
Here is a link to the fiddle:
https://jsfiddle.net/3ds9jpj4/
How can I edit my css so the spacing is consistent between smaller & larger screens?
Thanks in advance!
You're using Bootstrap container class. Try using container-fluid instead.
<div class="container-fluid">
Instead of Pixel, I think you should go by percentage of screen like 25%, 75%, that will look identical in ratio across all media size.
It's due to this (bootstrap) CSS rule which becomes active above 768px:
.container {
max-width: 750px;
}
just use a different class name, an additional class that overwrites this setting, or an additional rule that overwrites it.
I am new to css and need some advise. I have DIV with content of webpage with fixed width (1140 px) and green background which is centered in the middle.
{position: relative; width: 1140px; height: 2000px; top: 0px; z-index:1; margin: 0px auto }
What I want to achieve now are 2 divs on sides which contain just color of webpage fading into white. So border of screen is white and place where it meets central div is green. I know about linear-gradient property. Problem is that I dont know how wide these DIVs will be. Is there a way to make them relative to the central DIV so they fill whole remaining space to the side or I have to calculate it?
Does someone have a simple and elegant answer to this?
Thanks a lot
Yes, there is a way to fill up exactly the remaining space. You can make simple calculations in your css using calc and there is a unit of measurement vw that can come in very handy for this.
100 vw = 100% of the viewport width
so if you know your center div is always 1140 px, you can easily calculate the width of the side div's like this:
width: calc((100vw - 1140px)/2);
Browser support should be fairly good nowadays:
vh, vw, vmin, vmax
calc
One sidenote, consider working with pseudo elements :after and :before in stead of adding extra divs just for styling, which is considered bad practice. You should bever add markup just for styling.
A small demonstration of how I would do it:
http://jsfiddle.net/669t4s3L/
showing a diagram would have been good than this zigzag
One way of doing it is to use js and I guess css can do that.
Try this:
<script>
document.getElementById("yourDivId").width = (window.innerWidth - 1140)/2
</script>
N.B: dont forget to put this code after your div
I am trying to change my navigation bar's position from the top of the screen based on the screen width. I tried in CSS: top: 10%, but this is based on the height of the screen not the width.
Is there a way to get top: .1 * width?
Quite often overlooked is that the vertical margin percentage properties of elements refer to their containing block's width, not just the horizontal ones.
That means that if you set something to margin-top:10%;, it will have a top margin equivalent to 10% of it's containing block's width.
You can easily see that in this jsFiddle. Try resizing the output panel vertically and horizontally, and note which resize direction makes the inner block move up and down.
You can use vw and vh and if your browser targets are allowing, I'd recommend that. But if you can't use them, you don't have to use Javascript right away. Too many people gun right away for Javascript when it opens up a whole new can of worms (like, what if the browser resizes?), especially when a bit of creative use of CSS can get you out of a sticky spot anyway.
I was going to say there is no way to do so, but apparently in CSS3 since 2011 you have vw/vh that allow sizes to be relative to the viewport. For example:
img { height: 95vw; }
should give images a height that is 95% of the viewport width. Read more; apparently only IE9 supported it at the time of writing.
Open this page : http://jsfiddle.net/dwDZx/6/
Resize until red
Continue make the browser smaller
<div id="container">
<div id="div1"><div class="content">one</div></div>
<div id="div2"><div class="content">two</div></div>
Why does div2 jump down a row instead of resizing? How can I solve this?
You are adding margins for the smaller screen size. Set the margins to a percentage and subtract the percentage of the width for the smaller screen size.
So do not set a margin in pixels. but in percentages.
Updated your code at //jsfiddle.net/dwDZx/9/
When the divs are red, there are two relevant constraints that the divs try to follow: width: 48% and margin-right: 10px. If the div is jumping down a row instead of resizing, that means there isn’t enough space for both of them on that row – they are trying to take up more space than is available. Thus, the second div makes a new row for itself so both divs can be as wide as they want. So let’s look at the numbers and see why the divs are asking for too much space.
Load http://jsfiddle.net/roryokane/kZZCh/, which dynamically displays the width of the page and each div, and make the Result panel exactly 400px wide, so the bug shows itself. Now the two divs are 192px wide. That makes sense – 48% of 400px is 192px. The width does not include the margin, which is 10px for each div. So the total width the divs are asking for is (192+10)*2 = (202)*2 = 404 pixels, which is more than the 400px allotted to them. No wonder the divs are wrapping instead of staying on the same row.
So how do you solve this? Dany’s answer suggests changing the margin-right value from a pixel value to a percent value. But that is only one possible solution. Finding the best solution depends on why you chose the two specific numbers in width: 48% and margin-right: 10px, and which number is more important to keep. If you need the width to remain at 48%, consider whether you want to keep a fixed margin width or switch to a flexible margin width. If you you still want a fixed width, use margin-right: 8px. If you want a flexible width, use margin-right: 2% (Dany’s solution). On the other hand, if you need the right margin width to remain at 10px, then for the width, use width: 47.5%. All of these values ensure that even when the page is only 400px wide, the divs stay on the same row.