Support Center Visit Demo License manager Buy @ envato

Image Vertical Allignment

zorzzorz
in BeBuilder
Love working and designing with BeTheme! My website is almost done. :) 

As always, posting a question after unsuccessful playing for about an hour. Inspected the code and tried a number of SCC classes. I am trying to align the image on the right with the bottom of the section. When the text on the left on smaller screens pushes the bottom down, the image stays on top. Could you advise, please? Thank you in advance.

Comments

  • BryanBryan
    Hi,
    Set equal height of wraps in the section and edit the wraps, there set vertical align of items to middle.
    Look at this screenshoot: http://prntscr.com/f12fyj

    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • zorzzorz
    I did the exact thing you suggested but the image still seems to be stuck to the top...
  • BryanBryan
    You have to set two wraps in one section (left and right).
    1. Edit the section and set 'equal height of wraps'
    2. Edit each wrap and set vertical align middle

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • BryanBryan
    You have to set two wraps in one section (left and right).
    1. Edit the section and set 'equal height of wraps'
    2. Edit each wrap and set vertical align middle

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • zorzzorz
    Ah, I now I got it, have to use separate wraps. I underestimated the potential of wraps and haven't played with this approach. Now I was able to achieve, sort of...

    The problem is that choosing "Equal Height of Wraps" excludes the option of "Full Width" and I need that full width so the image could take as much space as possible. If I choose "Equal Height of Wraps", the content takes up not the full screen's width (say, on a large monitor) but the width defined by the Grid Width in the BeTheme Options > Global > General. I have a reason to limit that Grid Width so those two wraps in question cannot take the full screen width.

    I wonder if there is still a way to force the image down to the bottom via CSS with the "Full Width" style selected. If there is not such way, maybe a new style can be considered, something like "Full Width with Equal Height of Wraps". I seems to be like a pretty useful and common layout expectation. Thank you, anyway!
  • BryanBryan
    Yes, this is a problem that we will approach in the future. For now you will have to select the 'equal height of wraps' and add a full-width class. Like on this screenshoot: http://prntscr.com/f1gk72

    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • zorzzorz
    AAAAAA! But this is it! Just what I hoped for! Yet another cool thing I learned about using BeTheme! I never tried specifying a CSS class in that area. Thank you so much for pointing out. I am all content now.  =D>
  • BryanBryan
    Happy to help :D
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.