Recent
Categories
View Replies (3)

Jasmine -Columns

  1. Issue
0
Votes
Undo
  1. gerhardver
    gerhardver
  3. Commercial Templates
  4. Friday, 14 February 2020
  5.  Subscribe via email
Hi - always used the following in Habitat / Enterprise to display multiple products in content, which worked well on mobile (responsive)

<div class="col-4"><div>First column of your content...</div></div>
<div class="col-4"><div>Second column of your content...</div></div>
<div class="col-4"><div>Third column of your content...</div></div>
<div class="col-4"><div>Fourth column of your content...</div></div>
<div class="clear"></div>


Want to transfer to Jasmine Template - but this no longer works, and creates funny layout.
Please help
Responses (3)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of your issue?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
gerhardver
gerhardver
Accepted Answer Pending Moderation
0
Votes
Undo
https://advancepools.co.za/index.php/specials/ct-special - j51_enterprise
https://advancepools.co.za/index.php/d-i-y/summer-specials - j51_jasmine
References
  1. https://advancepools.co.za/index.php/d-i-y/summer-specials
  2. https://advancepools.co.za/index.php/specials/ct-special
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

The column HTML for more recent templates has changed slightly. To continue using the old format you can add the following to the Custom CSS field of your template settings...

.col-2,

.col-3,

.col-4,

.col-5 {

  float: left;

}

.col-2 div,

.col-3 div,

.col-4 div,

.col-5 div {

  margin: 5px 10px;

}

.col-2 {

  width: 50%;

}

.col-3 {

  width: 33%;

}

.col-4 {

  width: 25%;

}

.col-5 {

  width: 20%;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!