www.webdeveloper.com
Results 1 to 2 of 2

Thread: website centering with flexbox

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    38

    Question website centering with flexbox

    Hey guys,
    I've been trying to figure this stuff out for quite some time before I post here, but no luck...
    Basically, I am building a flexible/responsive website and I need to center the content. Here's what it looks like with this code:

    Code:
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    http://i.stack.imgur.com/dIgNM.jpg

    Although the logo and the footer is centered, the main content is messed up.
    I also tried the 'traditional' method:
    Code:
    width: 960px margin: auto
    and that seems to work fine with some tweaks on the content objects.

    However I need to use either the flexbox model or give the width in % so that way it's all responsive. And here's an issue again. I managed to fix all the content with % widths, but the images are problem, since they are in css, as background of a div. I have no way of giving them width, without interfering with the fixed div width that is necessary. And I need them to be in CSS instead of HTML, because I want to overlap some of them later on. Is there a workaround for this?
    http://i.stack.imgur.com/xdZ0A.jpg

    Thanks a lot for your help

  2. #2
    Join Date
    Mar 2011
    Location
    The Pleiades
    Posts
    31
    Good afternoon,

    In your CSS, where you have set the background image, add this line underneath.

    Code:
    background-size: 100% 100%;
    There are a range of values such as "contain" and "cover" which you can reference here: http://www.w3schools.com/cssref/css3...round-size.asp

    I'm not sure I completely understand the problem.

    Hope this helps though.

    Kind regards,

    LC.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles