home page layout

Hi All,

Any design gurus that can help me out on this:

after the categorys show on home page in version 4.20 I wish to display some banners underneath,

Banner1               Banner2
(float left)             (float right)

Banner3               Banner4
(float left)             (float right)


I have tried with the css code to achieve this but in the responsive view in firefox it renders completely wrong.

it renders it like this:

Banner1              
(float left) Banner2
            (float right)

Banner3              
(float left) Banner4
             (float right)

And also a full width banner but a quarter of the banner is missing in mobile view.

The code I have used is:

  float:inherit;
  margin: 0 auto;
  max-width:100%;
  height:auto;

I have tried display flex, float right but to no avail.


Regards

garrie007 wrote:
Hello.
... it looks like you need to use this approach https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp.
Best Regards.

Hello Garrie,

if you give us a working link with your current layout we can advise you on what the best approach would be to achieve this.

From what we currently know, we can just tell you that if you are going to be floating the banners, you better wrap their widget-zone in a wrapper so you can clear the floated elements.

For exmaple:

<div class="banner-holder">
BANNER_WIDGET_ZONE
</div>

and then add the CSS:

.banner-holder:after {
     content: "";
     display: block;
     clear: both;
}

Best Regards,
Valentin.