BUG: Page Builder > All Products > Module Block: Share Buttons

Tagged: 

ThemeBurn SupportForumsOpenCart ThemesBurnEngineBUG: Page Builder > All Products > Module Block: Share Buttons

This topic has been marked as not resolved.

I’m not sure if this may affect other module blocks in the page builder, but the share buttons are directly affected by this.

If you assign an extra class of hidden-xs or any other hidden-* type class, it does not affect the items visibility, regardless of viewport size. The reason is that the CSS that forces display:none; is being overridden by:

.tb_wt.tb_content_inline {
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

On a side note, it would really be great if product blocks such as image, title, etc. could be added to the product layout more than once. This way, if you want to reposition things for different viewport sizes, it can be done. I have found a creative workaround by tricking the system, but I’d rather not share that technique because it’s not really the proper way to achieve the desired result.

Thanks!

September 29, 2017 at 8:53 pm #61882

Hi,

Thanks for reporting this problem – it really is an edge case! Here is the fix:

1) Open catalog/view/theme/BurnEngine/template/tb/css/builder-blocks.css.tpl

2) Find this code block:

.tb_wt.tb_content_inline {
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

3) Replace it with this one:

<?php $prev_breakpoint  = false; ?>
<?php $first_breakpoint = true; ?>
<?php foreach ($breakpoints as $breakpoint): ?>
<?php if ($prev_breakpoint): ?>
<?php if ($first_breakpoint): ?>
@media (max-width: <?php echo ${'screen_' . $breakpoint} . 'px'; ?>) {
<?php else: ?>
@media (min-width: <?php echo (${'screen_' . $prev_breakpoint} + 1) . 'px'; ?>) and (max-width: <?php echo ${'screen_' . $breakpoint} . 'px'; ?>) {
<?php endif; ?>
  .tb_wt.tb_content_inline:not(.hidden-<?php echo $prev_breakpoint; ?>) {
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
         -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
  }
}
<?php $first_breakpoint = false; ?>
<?php endif; ?>
<?php $prev_breakpoint  = $breakpoint; ?>
<?php endforeach; ?>
@media (min-width: <?php echo (${'screen_' . $breakpoint} + 1) . 'px'; ?>) {
  .tb_wt.tb_content_inline:not(.hidden-<?php echo $prev_breakpoint; ?>) {
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
         -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
  }
}

BR,
ThemeBurn team

October 8, 2017 at 2:23 pm #61958

Hi,

About multiple instances of system blocks – some system blocks (breadcrumbs, titles etc.) can have multiple instances, but some cannot – this is a logic limitation. We will be grateful if you share your hacks (you can do it with hidepost if you want).

BR,
ThemeBurn team

October 8, 2017 at 2:26 pm #61959
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.