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
Related
I am using CSS and HTML trying to reproduce the homepage of this website http://www.newsweek.com/ as an exercise.
If you open the page with a large screen you will see at both sides two empty columns that gradually decreases as the broswer width is reduced.
I want to reproduce this behaviour but can't make it until the end: I have set a container class with initial width 80% that become 100% at some point thanks to media query in CSS:
#media screen and (max-width: 1047px) {
.container {
width:100%;}}
What I miss is the gradually reduction of this container. How it can be made?
Thank you very much
For an experience like that, all you need is something like this:
.container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
If .container is applied to a block level element (like <div>) then this element naturally goes to be as wide as it can. This just says don't go wider than 1200px, and designate the left over space equally between the left and the right.
If for some reason the element is not block level (e.g. a <span>) then simply add display: block; to the above code to make it block level.
I am not sure why there is a spacing (margin/padding) to the left in the second and third tabs. The test site location is: http://new.vonsazkin.com/index.aspx
Click on Residents in top menu and then click on the Events tab or the Records tab. You'll notice that the grid is pushed down. If I set the width of the grid to auto, then it moves up where I want it, but it shrinks. The max width I can set is 66.67% but it is shifted to the right. I want the grid to be 100% width and not have the spacing on top. You can right click in the browser and click the Inspect Element option to view the page code and CSS for the site.
Any clue?
Thanks in advance!
Interesting :) I found where the problem is: style.css
.residents_block .tab-pane {
display: block;
...
This display: block is messing with showing/hiding tabs. With this CSS other tabs are there but have opacity: 0. I believe this is some custom css (which breaks bootstrap functionality) and you should remove it...
All you need to do is absolute position the table when its parent is relatively positioned.
.resident_workspace_form .table-wrapper {
position: relative;
}
.resident_workspace_form table.alt {
position: absolute;
}
The padding between tabs
I didn't really understand what's your problem, but if you have in mind the space between the tabs - you have padding. Also tabs have height at media (max-width: 1199px) and (min-width: 992px) The height of tabs.
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 a layout that breaks at 500px using floats and inline-blocks to shift elements. But chrome(40) does not render them correctly after breaking from smaller to larger size.
Here's the initial mobile layout
Expected layout on resize
Incorrect result
The div containing edit/delete buttons is displayed inline-block and floated right, but does not stack along the 'tags'.
div.link-div div.edit-delete {
display: inline-block;
float: right;
background-color: #3498db;
}
Complete CSS JSFiddle.
My break point is between mobile rotations so the browser will resize. This works fine for FF, IE. Is something wrong in CSS? Please give some workaround.
Well, a way to solve the problem would be adding a "float: left;" to the anchor Tags, to make sure it doesn't occur. You can wrap them in a div and 'float' that div left in opposition to the "edit-delete" div.
Here is your JSFiddle edited. I created a class to the div called "tags-div", which, on MediaQuery is set to "float:left;" on screen sizes bigger than 500px.
#media screen and (min-width: 501px) {
.tags-div {
float: 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.