#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2016
    Posts
    1
    Rep Power
    0

    Help needed with FlexBox


    Hi,

    I am having some trouble with FlexBox.

    I can't easily copy the HTML, because it is all in Drupal.

    The issue is on the bottom this site: hm.ln.evenvision.com. At the bottom, where it says "What is my rate". I want the "purchase" and "Refinance"
    buttons to go under the text. I am having trouble getting that to happen, while keeping the image to the right.

    Here is the CSS:

    Code:
    //Container
    .block-bean-home-page-content-0 .entity-bean .content{
    	display: flex;
    	justify-content: center;
    }
    
    //Image
    .block-bean-home-page-content-0 .field-name-field-image {
    	max-width: 50%;
    	order: 2;
    }
    
    //Container for text and button
    .block-bean-home-page-content-0 .field-collection-container{
    	max-width: 50%;
    }
    
    //Button
    .block-bean-home-page-content-0 .button {
    	align-self: flex-end;
    	width: 100%;
    }
    
    //Text
    .block-bean-home-page-content-0 .field-name-field-description {
    	width: 100%;
    	order: 1;
    }
    Thanks for your help!
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,569
    Rep Power
    131
    I don't work with Flexbox, so sorry if this is of no help. I see nothing special here, so, if it has to be done via DIVs, would this be an option?
    Code:
    <DIV> <!-- This is the main container/row -->
      <DIV> <!-- The container/row's header -->
        What is my rate
      </DIV>
      <DIV style="display: inline-block;"> <!-- This is the left half -->
        <DIV>
          Your paragragh goes here.
        </DIV>
        <DIV>
          Your purchase button goes here.
        </DIV>
        <DIV>
          Your paragragh goes here.
        </DIV>
        <DIV>
          Your refinance button goes here.
        </DIV>
      </DIV>
      <DIV style="display: inline-block;"> <!-- This is the right half -->
        Your image goes here.
      </DIV>
    </DIV>
    Last edited by Triple_Nothing; July 12th, 2016 at 09:04 PM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

IMN logo majestic logo threadwatch logo seochat tools logo