Skip to main content
D
danbenner
Known Participant
April 3, 2017
Answered

Having difficulty getting Display: Flex to work...

  • April 3, 2017
  • 1 reply
  • 1465 views

I'm having trouble on this page with Flexbox...

This Page

It's on the laptop/mobile device sitting vertically centered inside the gradient background.

I was successful twice on the same page using Flex already (with some help, but I was getting the hang of it...) I then run across the laptop/mobile image sitting over the background gradient, and it won't stay vertically centered! (that is when I am widening the browse, simulating wider devices/screens)

I've been copying the original class down to my other elements and it's not working. I've tried using Justify instead of Align and still no dice... My padding doesn't seem to affect the laptop when I apply it to that element as a value or percentage... Everything either completely breaks or the laptop rises to the top left (as it does in the link.) Do I have an extra parameter in there or something?

I've poked around Inspect, but haven't found the right combo or something...

<!--Start of Kaiser Content Laptop Mockup-->
<div id="kaiser_laptop_container">

 

<div id="kaiser_laptop">
<img src="images/kaiser/laptop_foreground2x.png">
</div>
</div>

#kaiser_laptop_container {

    background: #e6e9ed url(/images/kaiser/laptop_background_550px.png);

    background-size: cover;

    background-position: center center;

    height: 550px;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    padding-top: 50px;

    padding-bottom: 50px;

}

 

#kaiser_laptop {

    /*min-height:400px;*/

    width: 90%;

    display: flex;

    display: -webkit-flex;

    display: -ms-flexbox;

    justify-content: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

 

}

This topic has been closed for replies.
Correct answer ALsp

My mistake on the adjacent images. Copying code from this forum is always an adventure. You need to make the embedded image scalable so it doesn't pop out of its box or cause a horizontal scroll bar to appear. You can do that by adding this style rule:

#kaiser_laptop img {

width: auto !important;

height: auto !important;

max-width: 100%;

display: block;

}

The width ad height !important declarations are to counter Dreamweaver's propensity for adding width and height attributes to the img tags.

1 reply

ALsp
ALsp
Legend
April 3, 2017

You have adjacent images, what were you expecting? Place your images inside individual flexbox containers. If you want a foolproof tool, you can also try this...

Flex Grid Magic for Dreamweaver

It will help you while you learn. It will help you to learn.

D
danbennerAuthor
Known Participant
April 3, 2017

I am afraid I don't follow about the adjacent images.

I was under the impression I had a large container id="kaiser_laptop_container" that I load a background image in. I was under the impression that background div doesn't require flexbox, only background position... (The gradient)

And within that parent div, there is a second image, a PNG of the laptop group that I want to vertically align (i.e. apply flexbox to).

In the event your question was not rhetorical and/or condescending, I was expecting the gradient to sit as a background and the laptop to float inside of that div/background and vertically align at different browser widths. Now it breaks the parent container.

ALsp
ALspCorrect answer
Legend
April 3, 2017

My mistake on the adjacent images. Copying code from this forum is always an adventure. You need to make the embedded image scalable so it doesn't pop out of its box or cause a horizontal scroll bar to appear. You can do that by adding this style rule:

#kaiser_laptop img {

width: auto !important;

height: auto !important;

max-width: 100%;

display: block;

}

The width ad height !important declarations are to counter Dreamweaver's propensity for adding width and height attributes to the img tags.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices