I'm trying to make a social page which will show the social feeds that my company use.
I've managed to use padding to align the feeds the correct height and bottom padding
although, I can't seem to align them with spaces in-between them.
Am I maybe better off turning social feeds into an ID then creating individual classes for each of the feeds?
If anyone wants a link:
http://surfersyard.co.uk/dev/social.php
I would make the three columns (containers) in separate divs (you can use the same background image adding separate background-positions for the divs), so you can align the iframes to the center of containers
Related
Currently im making a wordpress page, and i want to add these small author cards (pic related), which i can't seem to align side by side.
i figured that the margin is what restricts me from doing so.
The boxes are composed of shortcode. and i made my own div in my stylesheet to resize the width to 50%. However these author boxes are within a container, that sets a fixed margin, so if i for example try to float the boxes respectively left and right, they still align on top of each other.
Furthermore i tried adding individual div tags to my boxes, in order to css my way out of it, however still no luck.
Is there a way in which i can override the original margin?
Apply this CSS --
.author-shortcodes {
display:inline-block;
}
This will make those 2 boxes to stay next to each other. If applying this CSS does not really override, use 'display:inline-block !important;' instead.
I want to create something like this in the Susy grid system:
The different color demonstrate different sections of the website and also their background colors. The vertical lines are the grid columns.
If I use a simple grid container I can set the background color only within the div which is inside the grid, but I would like to have the background color stretched to the left and right edge of the website. The content stays inside the grid.
I found a solution using multiple grid containers (one for each section), but I heard that this approach is not recommended.
And I also don't want to use a fluid grid container.
As Eric Meyer, a developer of Susy, pointed out in the comments, the Susy grid is just a concept and there is nothing wrong with having multiple grids on the website, one in each section.
I was dealing with a similar issue.
I had used the following approach: Have a div (let's call it 'content') inside each of your sections.
Apply the container class to the 'content' div. .content{#include container;}
This way, when you set the background color of a section, it spans the entire width of the page while the content in the sections adheres to the rules of the grid.
Hope it makes sense.
I have some pictures I am using on my website. I am trying to reduce the http requests. In my header I have my logo floated left and then another picture with special offers etc floated to the right in the same div. My question how do I combine these together and still work out the amount of space I need between them as I am using a fluid layout.
Would you also advise combining the main background image with these logos etc and if yes how do i do this so it still looks correct in a a fluid layout
I've got several pictures that I would like to arrange and then center in the middle section of the Application Layout Control. I've made several attempts but apparently am just too numb to figure it out. Any help would be appreciated.
You need to look into CSS.
For example, you can add a div around your images and then assign a CSS class to this div. Using CSS you can then center and control size etc. for this div according to your preferences.
I would say. Take a look at the W3C Centering things.
I want to display a page of thumbnails. The thumbnails are user uploaded artwork images. Each image has a constrained width, but not a constrained height, this is to show the full image without any cropping.
I want the images to butt up against each other with no gaps in between. The number of columns is not fixed: If I expand or resize the page the images should flow into correct number of columns.
float:left
is ALMOST, what I want. Except when there are tall images in the page I get this gapped look:
How do I eliminate the gaps?
Not sure how graceful you need your CSS, but a good option none the less. You could use masonry.js to help that.
http://css-tricks.com/seamless-responsive-photo-grid/
If you want to do this in css only you have to create divs for every column, and float those columns (but it messes up order of images).
Alternatively, you can use jquery plugin like this one.