I've got a series of links to press articles I am publishing on a client's site (basic html and css, no php allowed). The client would like the articles neatly lined up in nice rows and columns. I'm trying not to use a table, but cannot seem to get things to line up correctly. Of course the article titles are different lengths which throws everything off.
I've got a jsfiddle which demonstrates what I am trying to do:
http://jsfiddle.net/ktpmm5/ug5s4Leq/5/
I would also like to do this without using a background image, but I can do that if need be (it might look fancier that way). The client also wants this to be responsive, and be viewed on the usual smartphones, tablets, etc.
Can anyone point me in the right direction? Thanks-
I would use the new CSS3 flexbox:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
but before you start, check if it is usable in the browsers you're developing for:
http://caniuse.com/#search=flexbox
Related
If you look at the attached screenshot you will see a design I have created for HTML email.
Screen Shot
In all of the tests I run, the following are on one row next to each other.
The logo, "VIP Edition" and the View all Deals button.
In Safari the VIP Edition and the View all Deals fall down a row and the logo centers. Can anyone explain this behaviour to me? I'm struggling to understand why it doesn't happen for the rest of the email, and I can't think how to phrase this question to find my answer.
It would be great to see your code, even if just for that section.
But I have seen this before and I know that when I see this it's usually when I have two aligned tables with an align=center on the parent td.
So for example in your instance, the VIP Edition logo would be in a left aligned table and the View all deals button would be in a right aligned table.
Make sure the td housing both of those aligned tables does not have an align attribute set.
Taking that off always fixes the issue for me.
If you need to center elements for mobile, set the align=center further up
I ended up starting again, I can only assume that it was something to do with the widths of the columns. I found this post which was useful.
In the frameworks section I decided to try a few. The first I tried was Zurb Foundations Ink, because I have used Zurb Foundation in the past. However, their supported clients wasn't comprehensive enough for my liking. They make no mention of the differing browsers, and in my opinion that matters. I've done a lot of testing in the last month. I will test it more thoroughly when I get time, at least they offer a version that works responsively in Gmail which doesn't use media queries.
Wanting something that worked on all platforms out of the box I tried Email on Acid's responsive template. It looks great, and I use Email on Acid to test, so I thought they would have it solved. Their website is full of useful tit-bits. However, their template didn't work in Safari and had the drop down issue I had initially started with. They don't claim it works there, but being as they offer a testing service, I had hoped it would work on all the platforms they use.
Then I moved onto AntWorts solution. That worked in my initial tests, and I found it remarkably easy to adapt to my needs, eventually adding additional columns using their methodology which was clearly explained in one of the templates.
My final template has 1,2,3,4 column grids which work responsively part fluid part adaptive. My advise to people in the future is to start with this boilerplate, I redid my whole template from scratch and it took half the time I have spent trying to troubleshoot a different boilerplate to start with.
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
So this is my first time trying to use a responsive framework...also fairly new to building responsive sites in general - but had a lot more luck with just building them from scratch and sizing each element...though Foundation seems like a much better solution if I could just get my head around it!
Work in progress is here: http://client.analog.la/360/
It's behaving 'alright' in my desktop browsers (resizing down to 400) except for a problem with the menu - the issue I'm having is trying to get the menu to drop down below the logo and be properly centered.
On actual mobile and tablet having way more issues...the menu is sitting above and the whole layout or to one side and not dropping down at all. On ipad the whole layout seems to be only about 95% page width with a random margin down the right hand side...on iPhone the whole layout only seems to be about 50% width...which just looks...awful. There's so much discrepancy between how the layout looks on devices vs. how it looks on desktop at the same resolution that I'm a bit baffled...Also, really not sure where I went wrong with the sizing to make it look so wrong on devices!
Any help would be massively appreciated!
Thanks,
Not sure if you're still looking for help on this, but there are a number of issues in your codebase, and it's hard to say which ones are causing the behavior you're trying to address. Your very first div uses the columns class, but it's not nested in a row. Elsewhere, you have rows immediately nested in other rows with no apparent benefit, more columns nested in other columns without an interposing row, and nested rows that aren't set to collapse. You're also using spacer.png in a few places, which almost reduced me to tears.
And your top level headers are in spans instead of h1. My only guess here is that you were attempting to sidestep Foundation's default styles? Use a class. You need those h1s for SEO, semantics, etc.
No insult intended, but you might do well to check out Treehouse and sharpen your coding skills - could save you a lot of time and frustration in future work.
I am having a real problem with a tables being rendered incorrectly in IE in an e-commerce store I'm setting up for a client. Here's the link:
http://jpgrv.zjbzq.servertrust.com/products-s/1819.htm
The tables are the areas the actually products are contained in. If you look in IE, you'll see that the height of the rows are too high. I've tried to apply CSS directly to the rows and to the columns (inline, external stylesheet and internal stylesheet).
I had a thought that maybe the images were too tall so I resized them and tried it, but to no avail.
I've done a Google search knowing that there are quite a few bugs in regards to tables and IE but none of the known issues that I've found have helped me find a solution.
BTW, as you look at the source code and inspect the site, it may look like a crazy mess of tables, etc. which is because this site is built within the Volusion framework so there's a lot of dynamically generated content.
If anybody has any suggestions or can point me in the right direction, I would greatly appreciate it.
The extra height is there because of a div "add_button" inside a div "container".
You can see it is this screenshot:
I recently just added a grid layout, but I can't figure out how to make my links work. The grid that I used is the 1140 one at http://cssgrid.net/. I studied the source code of that website, and tried to make my page like theirs, but when I put everything in it made mine worse, and the grid didn't even work. This is how my website is supposed to look http://spencedesign.netau.net/singaporehome.html
and this is how it does
http://spencedesign.netau.net/home.html
And when you reduce the size, it doesn't look like it's supposed to. When you minimize it I want the pictures(links) to be two per row, then one per row depending on how small the page is. I also want the quote to turn into different rows when it is too small for it. But I can't figure out how to make the page look normal regularly let alone make it look good with a smaller browser. Thanks!
http://goldengridsystem.com/ might have what you're looking for. Folding effect worked for me.