I don't understand, why this does not work:
#media screen and (max-width: 600px) {
.contentBlockText {
position: relative;
display: inline;
width: 100%;
background: #f00;
}
}
.contentBlockText {
position: relative;
display: inline;
width: 66%;
background: #fff;
}
The result always showns the width of the box with 66%. Also an my Samsung S9, it does not change the dimensions. I also tried the max width option with different widths. Same result. Can you see the problem? I have used that mechanism at some other position in the same sytle sheet and it works...
Try to change the order of the rule blocks, put the query after the default. I had encountered similar behavior and this had worked for me.
EDIT:
I wasn't paying attention. You cannot set width or height on inline elements. Just make it inline-block. It should be ok.
"The width of an inline element is the width of the content. The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS."
https://web.stanford.edu/class/cs193x/lectures/05/block-inline
Related
I have few divs on my page, which serve as a containers. Here is a sample CSS code of one of the divs:
header {
background-color: #fff;
height: 153px;
width: 97%;
min-width: 1084.06px;
margin: 15px auto;
position: absolute;
left: 0;
right: 0;
border-radius: 20px;
}
This is a centered container for my header. There are several other containers which I have styled simillar way (absolute, centered and width in %).
Problem is, when I resize the window, all these containers hit the left side of the browser window. I want to save some margin on particular window width. How can I achieve that?
P.S. If I add margin-left it breaks my center position of the div
You can use media queries, media queries are only applied on specific conditions, such as a specific width.
For example the following background-color rule won't apply for screens wider than 480px:
#media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
For more info about media queries see this w3schools page
Add another margin-right
then straighten it out depending on what you use
My page is split into 3 slices, as shown in this JFiddle.
In my full source code, I have media queries to help manage sizing between mobile and desktop. When someone accesses the site on mobile mode, Logo should appear at the top, and Items should appear below it. (I set display: none on my picture div to hide it)
Problem:
I can't change the positioning of the divs in HTML, or it'll disturb my current 3 slice layout. Absolute positioning is not an option, since most of my site is already dynamically sized, and I wouldn't want absolute positioning to interfere on a resolution I haven't tested on. This means calculating the margin sizes would be out of the question aswell.
So, absolute positioning is not allowed, nor is changing the orders of the divs. The result I'm looking for would be similar to this, exception without repositioning the divs.
My question is not about media queries, or how to size for mobile using media queries. I am only asking about how to get the layout I want with the restrictions in place (no absolute positing, no calculating margins, no changing div order).
Other questions I looked at:
Reposition div above preceding element - First answer suggests repositioning divs, which I cannot do. Second answer relies on calculating the position, which could interfere with other dynamically sizing elements.
Move The First Div Appear Under the Second One in CSS - Suggests I use absolute positioning, which I cannot do
Flexbox layout is your friend here. display: flex can be used to interchange the elements position on the layout.
#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
display: flex works only in modern browsers. Check caniuse.
A test on my android mobile shows it working on Firefox and Chrome, but not on the stock Android browser.
I tried to solve the solution using transform: translateY property in percentage value.
Note: This works if and only if the two containers have same height. or if the height is already known, then you can set the transform: translateY value according to the height.
CSS
#media (max-width: 700px) {
#container > div {
width: auto;
display: block;
float: none;
}
#container #picture {
display: none;
}
#logo {
transform: translateY(-100%);
}
#items {
transform: translateY(100%);
}
}
Working Fiddle
Probably the easiest is if you play with minus margins. Note that the below sizes (width and side margins) may need to be adjusted to your specific needs.
#container * {
width: 95vw;
text-align: center;
}
#items {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: left;
margin-top:30px; /* has to be smaller than the absolute of #logo */
margin-left:25%; /* half of the element's width */
}
#logo {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: right;
margin-top:-40px; /* its absolute has to be greater than the one of #items */
margin-right:25%; /* half of the element's width */
}
#picture {
width: 33%;
float: right;
display:none; /* Hiding #picture as you said you would */
}
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
http://www.remotegoatdesign.com/sayhey/pages/edit-valentines-marc-card.html
Doing this site for an assignment due tomorrow. In the proccess of making it responsive.
I am having an issue with the last color block, although its put into its container using percentages, it keeps moving out. In chrome its outside it straight away, whereas in Firefox its only when I resize. Although the difference is only a few pixels, so I'd assume its to do with the monitor size.
Any ideas guys? I'm stumped.
Try add this code snippet into your css file.
#tab-1 > div > div
{
width: 8%;
}
You can change the width.
Good Luck!!
Try using property " display:inline-table " for the class color_container
and give margin for the smaller color divs for space inbetween
try putting slightly smaller percentages(in the color block) and test it until it looks good. also it fits right in wider monitors as you say, because you have one css, that is best for wide screens. the point of responsive design is to have more than one media queries if the one you have breaks the design in smaller screens. so either make the color blocks really small, or myou should make more media queries
Your issue here is display: inline-block;. When you use it, it adds an extra space between elements. If you want to sort out this, you have 2 fixes:
a) negative margin-right
.box {
display: inline-block;
width: 8.74%;
height: 100%;
margin-right: -4px;
}
b) font-size: 0; on the container and default font-size on the elements inside
.color_container {
width: 98%;
height: 60px;
min-height: 60px;
padding: 5px;
background-color: #fff;
font-size: 0;
}
.box {
display: inline-block;
width: 8.74%;
height: 100%;
font-size: 1em; /* or what is your default font-size */
}
I want to make a div resizable with resize css property:
#foo{
overflow: hidden;
resize: both;
}
I can freely resize it with firefox.
with chrome/safari I can't resize it smaller than initial size.
their is a way to allow resize smaller with webkit? (min-width / min-height don't works)
see the live exemple from MDN (with 2 nested divs)
https://developer.mozilla.org/samples/cssref/resize.html
Better solution is to use :active pseudo class e.g:
div:active {
height: 0;
width: 0;
}
Example: http://jsfiddle.net/kronenbear/v4Lq5o09/1/
There is a small workaround that I found here, but it does work.
On hover, change the height and width to 1px
#foo:hover{
width: 1px;
height: 1px;
}
It sounds like this will cause a slight "flash" as the width and height are dramatically changing, but ... it is a hack.
I've been trying for hours but can't make it to work better than the hack, if I could just trigger a userresize I would be happy setting chrome's width to min-width then trigger resize to put it where I want, since it seems that you can move it back to original position after moving. But I don't find how to.
Using that live example as a reference, I was able to set the initial size to be equal to the width and height of the div, and the min-height and min-width to be the minimum dimensions allowable in Chrome.
#foo {
resize: both;
overflow: scroll;
width: 300px;
height: 300px;
min-width: 50px;
min-height: 70px;
}
div {
background-color: #acacac;
border: 1px solid #000;
}
<div id="foo"></div>
Here's the page: http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/
It looks great in Chrome even when you resize the browser, everything looks great. However, in Firefox, columns overlap one another and images don't resize.
The main grid classes are .c-1 (the smaller width column) and .c-2 (the width of two .c-1 columns). Whats going on in my code to cause this problem?
For quick reference, I'm using CSS3 box-sizing: border-box for my grid, here's the code for my .c-1 and .c-2 classes:
.c-1 {
width: 288px;
float: left;
margin-left: 28px;
display: block;
}
.c-2 {
width: 604px;
float: left;
margin-left: 28px;
display: block;
}
.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; }
I'm also using the following code for responsive images:
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
max-width: 100%;
height: auto;
margin-bottom: 1.875em;
}
EDIT Ok I've seemed to have fixed the responsive images for most sections now. A classname of .active was missing a width value but I've still got a crazy problem with the Blog section. Even though the same layout has been used on that page (.c-1 and .c-2 inline together) this section seems to overlap one another...odd!
Ok well it seems Firefox doesn't like calculating widths of elements when these elements don't have a width specified, which explains why responsive images were not working. An image set to max-width must have a container with a set width otherwise images won't scale.
I thought browsers defaulted elements to 100% width, if a width hasn't been specified in the CSS?
Anyways, all fixed now. Put widths on your wrappers people!