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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Neccessary

Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies.

Analytics & Performance

Statistic cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously.

Marketing

Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.