Responsive website layout question
I am designing my first responsive website and having a number of problems. I am trying to place 4 images on a page and have the names of the images centered below the images.
Here is a quick layout I made to help explain my question:
I am using a 12 column grid from "Responsive Grid System".
I am using this code to place my first image:
I used padding to place the image up against the right side of the first column.
<div id="painting1" class="col span_1_of_2">
<img src="images/spring380.jpg" alt="painting 1">
The layout of the images seems to work OK.
My problem comes in placing the names beneath the images.
I made a new "col span_1_of_2" beneath the images for the names.
Seeing the column extends to the left of the first image and to the right of the second image, I can't figure out how to center the names below the images. I added the names in a DIV, and used padding to center the names, but as the page width is reduced, the names do not remain centers under the images.
I have spent the better part of a day working on this problem and nothing seems to work for all the different screen resolutions.
Does anyone have a fix for this problem?
Last edited by lkeeney; 05-05-2014 at 02:43 PM.
I'm not familiar with whatever "Responsive Grid System" is, but given the code you posted I would expect that adding 'text-align:center' to the CSS rules for the class .one will center both the image and any text you insert after it the way you want.
But do yourself a favor and stop trying to learn CSS by trial-and-error. Go find a CSS tutorial online or a book on web design at your local library and build your understanding of how things work from the ground up. Trying to jump all the way from simple HTML to responsive design in one step will just leave you frustrated. Good luck!
I have signed up with linda.com and have been watching every course they have on responsive website design. I have also been watching all the videos I can find on youtube.com, but have not found anything that covers the problem I have.
All the videos I have watched cover very specific unique designs but I haven't found anything which talks about problems like this.
Unfortunately, 'text-align:center' does not work because the image is offset within this div, so the text would not center under the image.
Last edited by lkeeney; 05-05-2014 at 10:20 PM.
You really didn't post enough information to be specific. I'd need to see the relevant CSS for that. You might post a link to the page so I can see everything.
But my point remains. This isn't a "responsive design" issue, and trying to learn about responsive design before you understand the basics of CSS is not the way to go. You'll just keep running into issues like this.
I think you much use frameworks to do responsive sites and Bootstrap is the best to do that. Also please read some articles for responsive HTML.
Please post here more description with Example uploaded somewhere so some can help you ..
Unfortunately, I can't post the link to the website. This is an unusual job where I had to sign a non-disclosure agreement with the client. This is why I put together the layout image of the page.
Originally Posted by rtrethewey
As I reported to Rick, I can not post the "Example" page. I understand it is very difficult to give comments on something where you can not see the problem. This client if very concerned about me not releasing any information about their new business. This makes it difficult for me to even try to explain the problem.
I am using a custom grid system by http://www.responsivegridsystem.com/
Two possible solutions is either using clear fix : http://davidwalsh.name/css-clear-fix
This is the best I can do without actually seeing the html/css. Though if I were to take a guess, I think box-sizing is the answer/solution.
I haven't looked into your reply yet, but I will.
I thought I could present the problem more clearly with this image:
This image is showing the left half of the screen with 6 columns of a 12 column grid.
The blue lines represent the grid on which the items are placed. The yellow are two divs to hold content. The red is the photo placed in the grid using margins.
What I want to do is to center the "Name of the Photo" under the photo. Unfortunately on everything I have tried, it get broken when the page size changes.
I am a 78 year old retired Electronic Engineering Manager. When I retired 13 years ago, I took up photography and have a studio where I have been photographing models, actors, singers and dancers since I started the business.
If anyone is interested, here is my company website: http://www.lawrencecreativephotography.com
I have been hand-coding websites since the mid 1980's. I have built some quite complex websites including a flash website loaded with animation for a company. I have built many sites for industrial companies, in fact I was flown across the country to photograph the products and facilities for a large explosive manufacturing company. I used the photo in a website I designed for them.
I job I am working on now started out as a simple website with just a couple of pages. Unfortunately, after I had the site almost completed the client wanted it changed to a responsive website, and wanted to make sure it would work on everything from the oldest iPhone to the largest desktop monitor.
This was about 2 weeks ago. I have been studying everything I can find on "Responsive Website Design", but having a hard time wrapping my head around this.
Larry, I suspect that you are trying to solve the wrong problem. It seems to me that the problem is that you are using padding to place the images. That is why the text won't center. And I suspect that it isn't going to. Without seeing the actual code, I'd suggest you try:
1. Remove the padding (or make it symmetrical).
2. Center the text under each image (this should now be simple).
3. If necessary place each image/text pair in a parent div to allow you to place both on the page as a single item.
The client for this website is very particular about placement of items on the page. The original non-responsive website I designed for them was designed in accordance with a layout they had made on paper. They want the same layout only now they want it responsive.
To show you how specific this particular client is, they had me design the navigation for this site where the text of each navigation button was shown inside of a picture frame with matting. The text wasn't single words, but sentences which took up two lines. They then wanted the background of the navigation bar to be a very specific shade of "celery" color, and the wanted the background to have a specific texture as well.
I have all this designed in the non-responsive website and I am dreading trying to get this same navigation into a responsive website.
Another thing, when this site is viewed on a cell phone, they don't want the two photos which are now side-by-side to drop down one under the other as will happen with a normal responsive set up. They still want the photos to appear side-by-side even on a cell phone.
I think they are asking things that are pushing the limits of a responsive design capabilities.
As I mentioned I am certainly no expert at any type of website design, but it looks to me like there are many limits to what you can do in layout with a responsive design.
Thanks for the explanation. It is possible to make the two images stay horizontally aligned, again you use a parent div that only allows that orientation.
Overall, I'd suggest that the way ahead is to design three or four essentially static displays, with media-specific style sheets (or media queries) using "device-width" instead of "width". Your existing static design can be one of these displays. Note: I will assume that your static display was designed for 1024px (or thereabouts). If not, amend the strategy below to correspond.
(more to follow...)
Use code something like:
This example uses three style sheets to configure the display for different device widths:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" title="styles" type="text/css">
<link rel="stylesheet" href="medium.css" media="screen and (min-device-width:480px) and (max-device-width:1023px)" title="styles" type="text/css">
<link rel="stylesheet" href="handheld.css" media="screen and (max-device-width:479px)" title="styles" type="text/css">
<link rel="stylesheet" href="handheld.css" media="handheld" title="styles" type="text/css">
style.css - The default style sheet. This can be your existing static style sheet. Note: This assumes that the static design was designed for 1024px width. If that is not the case, amend the code accordingly...
medium.css - A style sheet for interim sized displays. Design it for 480px width.
handheld.css - A style sheet for the smallest screens. Design it for 240px width.
So rather than a design which adjusts dynamically for an size display, you have three static displays, one of which you have already designed. One problem you have with using "display-width" instead of "width" is that you need to test it on devices with the actual screen width. Therefore, for test purposes, you may want to substitute "width". Then you can use a set of IFrames 240px, 480px and 1024px wide to show how the site will appear o the range of devices.
"Grids" and "responsive" don't even belong in the same sentence, but then Grids were a dumb idea BEFORE we had responsive layouts since they by definiton are not fluid or elastic; a well written modern website should be elastic, semi-fluid AND responsive, and grids are NOT going to deliver that.
No matter how many half-assed code-bloat framework scams try to tell you otherwise. (and people wonder why I consider "frameworks" to have a negative connotations).
That said, you're getting WAY too fancy over something simple.
<img src="images/whatever.jpg" alt="describe this" /><br />
Put your text here
<!-- .plate --></div>
DONE. That's it. That's all.
width:160px; /* or whatever your image size is */
Well, except whatever that "responsive grid" nonsense is likely has you throwing around classes in a presentationa manner and extra DIV wrappers all over the place for nothing.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)