Move the banners of theme configurator under homepage slider

[miriama]

Hi, 

how would like to move the banners of theme configurator right under the homepage slider, like in the picture I attached.

 

I followed some sugggestions in the forum, first I created a full width slider, then I went to modules > positions, I searched for module named  displayTopColumn and move theme configurator module below the image slider module.

 

 

With theme configurator module add new banners to displayTopColumn.

 

Then  in: /modules/themeconfigurator/css/hooks.css  section I changed:

 

/* Top hook CSS */

  #htmlcontent_top {

    float: right;

    width: 33%;

    max-width: 391px;

    padding-left: 4px;

}

 

to:

 

/* Top hook CSS */

  #htmlcontent_top {

    width: 100%;

    clear: both;

}

 

After, since the slider is not in full width I went in  /themes/default-bootstrap/css/modules/homeslider/homeslider.css I changed the code as following:

 

#homepage-slider {
padding-left: 0;
padding-right: 0;
margin-bottom: 14px;
width:100%; /*new*/
max-width: 100%;
max-height: 100%;
overflow: hidden;
position: relative;
z-index: 1;
/*float: left;*/ }

 

 

Now the banners are displayed vertically, how can I display them in horizontal? 

Thank you in advance,

regards

Miriam

 

[endriu107]

Try to switch file hooks.css to this code:

 

/* Home hook CSS */
#htmlcontent_home ul {
  margin: 0 -5px; }
  #htmlcontent_home ul li {
    padding: 0 5px 10px; }
    @media (max-width: 479px) {
      #htmlcontent_home ul li {
        width: 100%; } }
    #htmlcontent_home ul li img {
      max-width: 100%;
      height: auto; }
      @media (max-width: 479px) {
        #htmlcontent_home ul li img {
          min-width: 100%; } }
    #htmlcontent_home ul li.htmlcontent-item-5 {
      width: 66.6667%; }
      @media (max-width: 479px) {
        #htmlcontent_home ul li.htmlcontent-item-5 {
          width: 100%; } }

/* Top hook CSS */
  #htmlcontent_top {
    float: right;
    width: 100%;
    /* max-width: 391px; */
    padding-left: 5px;
}
  @media (max-width: 767px) {
    #htmlcontent_top {
      width: 100%;
      max-width: 100%;
      padding-left: 0;
      padding-top: 0px; } }
  @media (max-width: 767px) {
    #htmlcontent_top ul {
      margin: 0 -5px; } }
  #htmlcontent_top ul li {
    width: 33%;
    margin-bottom: 10px;
    float: left;
    }
    @media (max-width: 767px) {
      #htmlcontent_top ul li {
        float: left;
        padding-left: 5px;
        padding-right: 5px;
        width: 50%; } }
    #htmlcontent_top ul li:last-child {
      margin-bottom: 0; }
    #htmlcontent_top ul li img {
      max-width: 100%;
      height: auto; }

/* Left hook CSS */
/* Right hook CSS */
/* Footer hook CSS */

It colud be not complete solution and need some small change, but you dont share url to your site so hard to say.

[miriama]

Hi,

thank you so much for your replay.

 

Sorry, the website is www.takeishop.it, I tried your suggestion but it doesn't work, could you please help me? 

[Ckay]

Hi,

thank you so much for your replay.

 

Sorry, the website is www.takeishop.it, I tried your suggestion but it doesn't work, could you please help me? 

 

Your link goes to a maintenance page.

[miriama]

Sorry,

I tought I have already activeted it... now is online, sorry again...

[Ckay]

Sorry,

I tought I have already activeted it... now is online, sorry again...

You've got the following code on line 39 of hooks.css...

 

#htmlcontent_top ul li {

width: 100%

margin-bottom: 10px;

}

 

That means that each list item is taking up 100% width of the container and therefore the next one will default to the following line....and each one after that.

 

Try deleting that line of code OR on line 650 of the global.css file replace width: 33.33333%; with width: 33.33333% !important;

[endriu107]

The code what I give you is correct, just look:

 

 

All you need is correctly switch all code in this file.

[miriama]

Your are great endriu107!!!!

 

Thanks,  I tried again your code and everything is as I wanted!!!! 

 

Thank you again,

regards

Miriam

[miriama]

Sorry, another question: it is possibile to display the banners in a way that can fit on the mobile phone? Because I tried on Iphone 6  but two banners are ok, the third is displayed under the other two....

 

 

Thank you in advance, 

Miriam

[Ckay]

Sorry, another question: it is possibile to display the banners in a way that can fit on the mobile phone? Because I tried on Iphone 6  but two banners are ok, the third is displayed under the other two....

 

 

Thank you in advance, 

Miriam

 

 

Add the following css....

 

@media (max-width: 376px) {

#htmlcontent_top ul li {

    float: left;

    padding-left: 5px;

    padding-right: 5px;

    width: 100%;

}

}

Edited August 18, 2016 by Ckay (see edit history)

[miriama]

Perfect, great!!!

 

Thank you so much!!!

 

Regards

Miriam