Strange chrome media queries behaviour - html

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;
}

Related

Spacing/width issue with my CSS3

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.

Use media query to order div elements vertically when page gets smaller

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.

Div not resizing even with clear or overflow

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

Different layouts for different screen's width

I am working on a webpage, and I want to use JavaScript to center some text (contained in a "p" with the display:inline-block attribute) when the text is shifted under everything else (on a smaller window). When the window size is big enough, I have the text on the right of the screen (where I want it for larger windows).
Basically, I have content on the left and right of the screen for bigger windows, but I want that content to become centered and vertical when the browser is smaller.
I've tried using .addEventListener() but my JavaScript knowledge is pretty limited.
Any thoughts? Does this make sense?
I see you're trying to do some sort of responsive design. You're better off doing this without any javascript.
You should look into Css Media Queries, that are meant to set specific css styles depending on the screen size:
#media screen and (max-width: 500px) {
Similar to your scenario, here's a sample showing the concept: http://jsfiddle.net/xkJ3G/
Resize the window and test it!
You can achieve desired effect using only HTML and CSS.
JSFiddle
HTML
<div class="outer">
<div class="A">A</div>
<div class="B">B</div>
</div>
CSS
div.outer {
width: 100%;
text-align: center;
}
div.A,
div.B {
width: 40%;
min-width: 250px;
display: inline-block;
}
Linebreak will be when width is lesser than min-width (in this example when 40% < 250px)

Horizontal to vertical menu, on browser window resize

Say I have the following list in html:
<ul>
<li>Program</li>
<li>Platser</li>
<li>System</li>
</ul>
Which is styled as follows:
li
{
float: left;
padding: 10px;
}
This looks something like this:
When I resize the browser window, and the border touches the edge of the last li, this element jumps down as expected:
Though, the desired behavior I am after would be like this:
When the last element is touched by the browser border, the whole menu becomes vertical. My question is how to do this with CSS?
You need to look into CSS3 media queries/responsive web design. Tons of results on google and on SO, but here's one.
#media screen and (max-width: 200px) {
// do something here, change the behavior of your list
}
You could CSS3 media queries to remove the float:left when the width of the screen is small enough.
https://developer.mozilla.org/en/CSS/Media_queries
you can set the width or min-width attribute in CSS for the ul element to prevent it to be cropped if you resize the page
Use CSS3 media query and specify different css rules for different width of the browser window.