I am designing an elastic layout which is used with a dynamic number of items. As you can see, the layout is fluid and the number of items per row changes with the resolution. I can put on any classes I want on the item when I generate them with PHP if this helps.
Code
http://jsfiddle.net/N3VRM/3
http://jsfiddle.net/N3VRM/3/embedded/result/
Problem
I always want the left-most pink grids to align with the far left of the page and the same on the right side. Currently there is always an extra 1% margin on the pink squares, meaning they do not align with the "testing" text.
Invalid solution
The only solution I can come up with is to put a 1% margin on all content which isn't the pink grid so that they both align (i.e on the testing text), but on my production site, this is going to make it very messy. Using javascript would also be an invalid solution
Possible solution
Possibly the way to achieve this is to use the CSS nth item rule for different resolutions like below but I can't seem to get it working correctly:
#media (max-width: 1200px) {
.thumb:nth-child(3n+3) {
width:21%;
}
}
I just know there is a really smart, elegant solution to this and I can't figure it out. Points go for the cleanest, most compatible solution.
you could take a look at ways to justify align your boxes and use display:inline-block; instead of float or display:flex.
IT will send to far right and far left first & last box of each line. but boxes will not be dispatch on last line with same margin and will break the column look.
display:inline-block and text-align:justify:http://jsfiddle.net/N3VRM/4/
display:flex and flex:wrap and justify-content:space-between :http://jsfiddle.net/N3VRM/5/
But what looks close to your needs is the use of the selector nth-child(n) to count and reset specific margin to selected boxes.
So let's test : .thumb:nth-child(4n) {margin-left:0;} .thumb:nth-child(4n+1) {margin-right:0;}
http://jsfiddle.net/N3VRM/6/
these count needs to be reset and set for each mediaquerie.
See in last fiddle linked, shadow color switching with mediaquerie.
Related
I'm testing out some code for a random personal project and I'm looking to place 3 boxes side by side (I believe as divs). But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?
Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time.
Unfortunately, I need more reputation to post my code in the proper format it seems.
Not 100% sure if I get you correctly.
For "But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?", if you wanna make them horizontally centered, you can try this:
wrap them in a container node.
assign a width to this container in its style.
set both margin-left and margin-right of this container to auto
This should then make these 3 boxes (actually the container) horizontally centered.
For "_Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time. _", perhaps width: calc(100% / 3) is what you want to put in the styles of these boxes.
In modern web browsers, even if #Slash_D response is correct, you can get a more flexible alignment using flexbox (here you have a complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Futhermore, if you want all the containers drop at the same time, you have to deal directly with media query based on resolutions (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) , or use a grid system, like bootstrap, that helps you with media queries based on classess (https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works)
Hope it helps
A few days ago I found this nice psd Landing Page and I'm not sure how to style it. I've seen this kind of styling long time ago.
Should this line be an image or something?
Moreover, can you send me some code examples of similar style?
Screenshot
I have wanted to make one of these before so I whipped this up in 10 minutes, I am using SCSS - to view plain CSS click the drop down chevron next to "CSS (SCSS)" then "View Compiled CSS".
http://codepen.io/z-/pen/bwPBjY/
Analysis of what I have used:
Each event is .entry and they are all contained within .entries, .entries is centered using margin:auto and given a width with a percentage with a maximum width with pixels in order for various screen size support.
Every other entry is on the same side so I'm using :nth-child(2n) to select all even numbered entries so I can float them to the right and text-align to the left; I will be using it to override default styling given to the odd numbered enties.
To put entries on either side of the line I make the width calc(50% - 80px) which basically means that there will be an 80px gap between the text and the line because we are floating outward. We also want the entries to be fairly close height-wise (the image you gave the vertical spacing is uneven so I just ignored it and did my own thing) so we give a negative margin-top of -60px, we also want to make sure that the overlapping that we do is what we want so we need to add in clear:both to stop elements drifting into the open space; so the first entry doesn't vanish off the top of the page we can use the :not() selector .entry:not(:first-child) {margin-top:-60px;} and this will give the negative top margin to all but the first element.
To add the circles we use pseudo-elements :before or :after, I'm using the title as the base and just make a circle and move it out towards the line a number of pixels.
If what I've said has just gone over your head then I suggest you get some base knowledge from somewhere like https://codecademy.com/
I have a page with a container div, this container div has two columns, both inline-blocks. One column (left Hand side (LHS)) is the ticbox selection for a shopping catalogue, the right column is the output of the chosen selection.
The issue I have is that each is assigned a width based on percentage of the parent width, the left - fixed column is 20% width, the right, output column is 79% width (I tend to allow 1% for variability) .
BUT: the left column needs a minimum width - defined in px as 155px;
The right hand side (RHS) column is filled with inline-blocks for each product displayed by the catalogue search. These blocks are fixed width (140px)
MY ISSUE:
When the page loads on my screen it's fine, but when:
LHS:
min-width:155px < width:20%
(the browser window is resized)
The whole of the right hand side drops below the content of the left hand side (as the width for it is less than the required 79%.
Some simple example:
Please note there is no borders or paddings to be considered when measuring widths.
HTML:
<div id="container">
<div class="leftsideMenu">Menu column.</div>
<div class="rightsideShop">Shop Contents</div>
</div>
CSS:
#container{
width:80% /* of screen */
min-width:555px; /*should leave 400px for shop contents */
}
.leftsideMenu {
display:inline-block;
width:20%;
min-width:155px;
vertical-align:top;
}
.rightsideShop{
display:inline-block;
width:79%;
max-width:calc(100% - 156px) !important; /* fix attempt - doesn't appear to work */
vertical-align:top;
}
[Some] ATTEMPTED FIXES (not in order of attempt):
1) Calc to make the max-width always less than 100%-155, doesn't appear to work
2) Floats and margins : this does work but presents the problem of layout that the client doesn't want shoes underneath the LHS column and float height = 100% parent is another issue,
3) I have also tried to use https://stackoverflow.com/a/6350781/3536236 answer to a similar question - with the approach of having the RHS relative and using a forced LHS margin but this doesn't work as the solution linked here didn't work for me in this situation.
4) I think flex-box style working is probably a best way forward but I do not know enough about it, and to be brutally honest, I was hoping to avoid a massive reworking of the page CSS. (I had originally expected this issue to be 30minutes!).
5) Setting no width (just max-width) for RHS - to auto defined width, this auto defines to 100% and goes underneath the left hand side column.
I think the answer is pretty simple but I can't see it :(.
To explain parts for the points above, the LHS was originally a float and that worked fine but the client wanted no products appearing underneath the menu in the LHS column, so I thought - ah simple, make it an inline Block....
Any help as to keeping the right hand side giving the left hand side the space it needs, even upon screen resizing?
............
OH FOR FFFFFFFF SAKE -- I have just written this all out, and while I've been writing this have been trying different ideas as they've occured and it's finally worked:
Now after all this effort for writing this out I want to post it anyway, but the Solution is below!!!
OH FOR FFFFFFFF SAKE -- I have just written this all out, and while I've been writing this have been trying different ideas as they've occured and it's finally worked:
For some reason my calc works with:
max-width:calc(100% - 160px); Giving a spare space of 5px .
Any ideas why this is so, as I say, within the container div standard widths are percentages and there is some padding in the product container (inline-blocks) inside the RHS, but this really shouldn't have influenced having to add more "padding" space in the calc method.
Anyway, it works now. I'm happy. Maybe this will help someone?
With inline-block you will have some whitespace taking up some space in your layout.
Two inline-block divs with a width of 400px in a container div of 800px won't always render next to each other.
You can fix this by making sure the closing tag of an element is directly next to the opening tag of the next element in the HTML (e.g. </div><div>, no newlines or spaces).
A better option is to apply font-size: 0 to the containing element and then reset the font-size to e.g. 1rem for the inline-block elements.
I have some divs, and I want them to start filling the main div vertically, and then cause the main div to scroll horizontally.
Currently, I'm using float:left on child divs, but it does exactly the opposite: it starts filling the main div horizontally, and then the main div scrolls vertically.
The number of rows may differ based on screen size, so I can't create a table for this purpose.
table + some javascript hacks may allow me to do this, but I prefer a CSS (without any javascript) way. Because this code will run on mobile apps, and javascript will slow down the web app.
This is my current code, and here's the result of my current code. But I want something like this.
UPDATE: As #goliney suggested, seems that it can be done with css-columns. I created this example right now.
Now, there are these two problems:
While it's working good, it still needs some javascript to determinate number of visible columns (column-count) in the page. Although it's a minor javascript process, is there any way to do it in CSS, too?
Also, I prefer to show a little bit of fifth column, so user can know that this list is scrollable horizontally. But columns-count can't accept some float value (like 4.2), it only accepts integer values. So how can I do it?
As #goliney suggested, css3 columns can help.
I've created an example of using css3 columns in this issue, here.
However, it needs javascript to figure out count of columns, or since I'm targeting tablets, I can create some predefined classes using media queries.
Second, I needed some way to show a little bit of next column, so user can know that this list can be scrolled horizontally.
I've found that if I set a margin-left and then take it back into it's right place using translateX, it'll happen correctly.
So this is the final code for container div:
.main {
column-count: 4;
column-gap: 40px;
height:480px;
margin-left:80px;
transform: translateX(-80px);
}
(I removed prefixed properties here, but they're available in jsFiddle)
And this is the final result in jsFiddle.
In the following jsfiddle I have put some html and some css. I'm trying to not have each element wrap when the screen gets smaller. Actually I'm trying to implement the jqueryUI slider inside of my container. I've tried to implement several css fixes to get each element to line up side by side. However they initially wrap. If you play with the size of the results box for the fiddle below you will see that it does in fact wrap.
http://jsfiddle.net/webdad3/UaQQt/
What am I doing incorrectly
Not sure if I understand your question... You want all those seven-line tables arranged on one row, not wrapping under each other? If so, how about something like
.post-content { min-width: 85em; }
If you want them to stay arranged in a 3x3, maybe display:table is what you need...