PDA

View Full Version : How to centralise a box on a responsive site?


Skylark
01-22-2013, 08:56 PM
I have used a responsive template to create a responsive website. Everything is fine, but there's just one thing left to do, to make it a little more pleasant to view.

See in the following screenshot (taken from inside Dreamweaver CS6) how the block with the text "For publication in mid 2013" is sitting up against the left margin. That's OK, it stays up against the left margin even when the screen is reduced to smartphone size. But if viewed on a wide screen I would like it to be centred in the middle of the wide screen, i.e. in the middle of the rectangular block that can be seen in the yellow area above it.

I have gone into the properties of the box and played with its margins and its padding, and I can thus move the box into the central position. However, if I then shrink the screen to smartphone size, the box does not move right over to the left edge of the smartphone screen. The padding or margins I used meant that there was a large white space between the edge of the smartphone screen and the box . . . and so a smartphone-user would have to scroll to the right to see the contents of the box.

So, I'd be grateful for instructions on how to centralise the box on wide screens, but for it to automatically respond and move to the left edge of a the narrowest screen.

Thanks.

http://i246.photobucket.com/albums/gg82/EddyBentley/Dreamweaverresponsivehowtocentre.jpg

edbr
01-23-2013, 01:05 AM
url or code please

Skylark
01-23-2013, 01:16 PM
Thanks, edbr. The page is at:

http://www.davidcade.net/index.html

Thanks for your help.

gentleone
01-24-2013, 02:25 PM
If you go to your CSS and look for .content. There you must delete the 'float: left' and change the left and right margins to 'auto'. Your content div will now be centered, but 400px width content div is imo too small for large screens.

Skylark
01-24-2013, 10:04 PM
"gentleone", thanks a million! I wish this site would allow me to give you "kudos"!

I see your site is responsive too! AND, moreover, you're in gorgeous Greece!

If it's not too much to ask, could you collapse my homepage slowly and see how halfway along that central column (of 400px) sticks (just for one stage) against the right of the screen. It's a minor quibble, and I could live with that, but is there by any chance a way to ensure centralization of that column through all the different screen-sizes?

Efcharisto!

gentleone
01-25-2013, 11:30 AM
If you go to your stylesheet 'style.css' somewhere halfway you see the section where your media queries gets kicked in (see below). In this tablet (Portrait) section under 'Blog Post and Sidebar', there is a rule for .content again, but this time the width is 488px instead of 400px and there is a right margin of 20px. So delete the right margin cause that's causing that shift and you might want to adjust the width as well for consistency.

/* ================================================== ================================================== ==
MEDIA QUERIES
================================================== ================================================== ===*/

/* ================= Tablet (Portrait) 768px - 959px ================= */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* ================= Logo and Main menu ================= */


/* ================= Blog Post and Sidebar ================= */
.blog_post .right_side .published { /*display:inline-block; */
}
.content {
width:488px;
margin-right:20px;
}

Skylark
01-25-2013, 04:01 PM
GentleOne, you are a whizz! Thanks for helping me add the finishing touches to my site! Much appreciated.

Ricky55
01-26-2013, 02:40 PM
I like that site Skylark, like the colours you've chosen to use, works well for the subject matter.

Skylark
01-26-2013, 03:00 PM
I like that site Skylark, like the colours you've chosen to use, works well for the subject matter.

Thank you, Ricky.

Have just visited your website . . . and am honoured that such an expert should like the appearance of mine!

Will try to visit your site occasionally to remind myself of how little I know!

Your page on "Retina Display" is fascinating!