Support Center Visit Demo License manager Buy @ envato

Image Alignment and Category Borders

BiMiLtdBiMiLtd
in BeBuilder
Hi We have a couple of issues with the styling on the home page 
Hope you can help

On our home page both of the top images (when we enable border in theme settings) do not align
We have played around with the sizing and padding but have spent so long on it and cannot seem to get them both the same!
I have also gone into the builder and set the styling to "object height the same" yet we still have the same issue? 

Comments

  • BryanBryan
    Hello,
    this is a simple image and you would have to calculate how much width/height ratio should they have to appear the same height and change the size manually
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • BiMiLtdBiMiLtd
    Hi, they are both 536 px in height which is why I am contacting you guys 
    The first is a larger square then a side image - so I assume it must be something to do with ratio however I have set the css style option in muffin builder to items same height? And the difference in height it minimal - i just can't get them exact?? 


    713 px x 536 px

    345 x 536 px


  • BryanBryan
    As I said, it does not matter that they have the same height when they have different widths, you cannot really fit it perfectly this way, it will always break on lower or larger resolutions.

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • BiMiLtdBiMiLtd
    OK...thanks for your comment. But where's the support? 
    When I take the border of they are fine and both fit. 
    I understand what you are saying about the ratio, but I think the issue actually sits with the border option that is available within the theme. As that is when it falls apart? 
  • BryanBryan
    Okay, but how can we support things that are not theme related or not possible.
    If you want to remove borders from your images then go to theme options>global>general and you will find that option there.
    Borders are the same for both images so how could they impact anything.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • BiMiLtdBiMiLtd
    Well that option is part of the theme?? To add the border is part of the theme option, and once the border is added that is when the height  causes a mis-alignment? It is quite clearly theme and css related? 
  • BryanBryan
    Because the borders adds additional left and right spce which starts to scale the images.
    We really are not going anywhere with this, if you make the screen a bit smaller it will break even if you disable the border. This is not theme related, sorry.

    If you want to do this correctly then place 2 wraps inside the section and set the background for those wraps. Then insert in each wrap a column and in the custom css field type: 
    min-height:500px;
    Then and only then you will have 2 same height images which in fact are backgrounds.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.