I am aiming to create a simple image grid using css floats with certain 'featured' blocks which are double the size of the others.
I have it mostly working fine however when a block is featured I'm unable to get the next block to fit underneath it correctly.
I've included a jsfiddle to make the problem much clearer. You will see that at the bottom of the output there is a block on a row of it's own to the right of the featured element (with the class 'problem'). I would like this to instead be on the left of the featured block and on the same row as it is currently so that I can add another 2 blocks to create a completed grid but I can't work out how.
CSS:
.grid {
ul {
padding: 0;
margin: 0;
width: 100%;
li {
width: 20%;
float: left;
list-style: none;
box-sizing: border-box;
white-space: nowrap;
list-style: none;
line-height: 0;
img {
width: 100%;
}
}
}
.featured {
width: 40%;
}
}
(Nested css is due to scss).
Full fiddle: Link
Any help is greatly appreciated.
Technically this is called Dynamic Grid Layout
As per your requirement you have to use jquery here because there is no solid solution available using only css and html.
There are ready made plugins available online.
You can see or download the demo from here:
Reference 1:
Reference 2:
Related
I'm trying to use the "stars" example as a simple background in a html page, with html content on the page as well (I'm far from being into js. - simple html- and css-handling is ok).
What do I have to put into:
- css (separate or inline)
- html head
- html body
I'm just looking into the .js use as a background. I managed to strike the mouse parameter as vector defining out of the stars code. This runs ok now just as is, but I either turn up in showing just the .js or the html content with missing the stars background. Thanks alot in advance!
This is what I have setup in my CSS
body {
height: 100%;
margin: 0;
overflow: hidden;
}
canvas {
margin: 0px;
padding: 0px;
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
Hope this helps
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
Seems I cant find correct class to horizontally align the Agent imageswith text below . site: http://hendersonrealestatepros.com/listings/2724-mintlaw-ave/
tried
.connected-agents{
display: inline-block;
margin: auto;
width: 70%;
padding: 10px;
}
.connected-agents{
float: left;
width: 70%;
padding: 10px;
}
i would recommend using margin: 0 auto; and float: none for #listing-agent so that it will align to the center. please let me know what output you are expecting
try this -
#listing-agent .connected-agents {
display: table-row;
}
.agent-thumb, .agent-details {
display: table-cell;
vertical-align: middle;
padding-bottom: 20px;
}
You have quite a large amount of CSS classes interacting which makes a simple solution a bit tough due to the "style soup" (styles overriding styles overriding styles) and markup that could be improved upon.
The one main assumption I'm going to make is that you want the agents to take up the full width that the paragraphs above the agents take up.
Remove float: left; and width: 48%; (possibly the padding too) from #listing-agent. You have two selectors setting float and width for #listing-agent. They are #listing-agent, #contact-form {...} (in the <head> of the page) and #listing-agent, #listing-agent + #listing-contact {...} (in impress-agents.css line 141). I would remove #listing-agent from those selectors so they are: #contact-form {...} and #listing-agent + #listing-contact {...}.
Remove the child <div class="connected-agents"> of #listing-agent.
Doing those two things will get the agent section the same width as the paragraphs above.
Now to horizontally align the agents (with text below image).
Make sure to undo the display table stuff that you added from another answer.
Float the agent container element to the left. You have a myriad number of CSS classes to hook onto, connected-agents vcard post-11274 employee type-employee status-publish has-post-thumbnail hentry offices-tr-realty job-types-broker-salesperson entry. Use which ever on works best for you. If you choose to use .connected-agents make sure to remove the <div> mentioned above. Below is one option:
#listing-agent .employee {
float: left;
width: auto; /* removes `width: 100%;` set by .hentry and .entry */
}
hey i have set some breakpoints and ive set list item in percentage and it fits well in different breakpoints.
but my default one which i haven't set is displayed like this.
here is my sass code.
li
{
width:20%;
padding: 2px;
float:left;
#include media($xl-desktop) { // As defined in _grid-settings.scss
width:10%;
}
#include media($mobile) { // As defined in _grid-settings.scss
width:33.3333%;
}
}
Please tell me where am i doing it wrong.
thanks.
Here is my Demo
Demo Link
can you try this layout?
to make images responsive you need to add width: 100% (you did the exact oppsite);
Make an image responsive - simplest way
http://jsfiddle.net/95EfW/
css:
ul{
list-style: none;
}
li{
float: left;
padding:0;
margin:0;
width: 20%;
padding: 4px;
}
img{
width: 100%;
height: 100%;
}
thanks for the demo, it helps. So here is the issue, the issue is each of your image is different size, hence when you float left it brings the remaining pictures down in different screens. To fix the issue, you have two methods, using inline-block (rather than float on li) or setting a static height for different size screens. here is a small demo for setting heights jsfiddle.net/f5cgT/2 – ravitadi 1 hour ago
This will prevent the floats to drop as you clear each row.
.galleryList li:nth-child(6n+6) {
clear: left;
}
But the images original size should be the same 500px x 750px as well. Than you would not have the gaps in the first place...
I've been working on a web application using Bootstrap, and have come across odd behaviour in my columns that I cannot seem to figure out.
Most of the CSS I'm using is just Twitter bootstrap defaults. I've attached screenshots of the HTML structure and the problem itself.
The Issue
It appears that the first div in my main-content div is expanding to match the size of the sidebar, which makes no sense to me.
Also upon further investigation it appears that each child within my #main-content div contains the following CSS, which causes the issue. How might I circumvent it?
.row-fluid:after {
clear: both;
}
.row-fluid:before, .row-fluid:after {
content: "";
display: table;
}
.row-fluid:after {
clear: both;
}
Here is the actual page: http://d.titanlabs.ca/ai2/test.html
May be i know the reason just give float to your #main-content also. write like this:
#main-content {
float:left;
margin-left: 45px;
padding: 25px 0;
width:860px;
}
UPDATED
#main-content{
margin-left: 45px;
overflow:hidden;
}