Recent
Categories
View Replies (2)

Piano Forte Responsive Issue

0
Votes
Undo
  1. hopekiah
    hopekiah
  3. Commercial Templates
  4. Monday, 18 November 2013
  5.  Subscribe via email
Greetings!
Please look at http://www.restoration-ecology.net.

On the home page, shrink the screen and see what happens to the columns of article intros. The HOME page is a featured article page, with four columns. This may change to three columns with a sidebar.

The responsive layout option is selected.

How can we make this work?
thanks,
-Hope
Responses (2)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Hope

Could you give the following a try, you can add this to the Custom CSS field of your templates parameters..


@media only screen and (min-width: 768px) and (max-width: 959px) {

.item.column-1.span3, .item.column-2.span3, .item.column-3.span3, .item.column-4.span3 {

    margin: 0 5px 10px;

    width: 48%;

}}

@media only screen and ( max-width: 767px ) {

.item.column-1.span3, .item.column-2.span3, .item.column-3.span3, .item.column-4.span3 {

    margin: 0 0 10px;

    width: 100%;

}}

@media only screen and (max-width: 440px) {

.item.column-1.span3, .item.column-2.span3, .item.column-3.span3, .item.column-4.span3 {

    margin: 0 0 10px;

    width: 100%;

}}


This should place your articles in two columns on portrait tablet and then in a single column on mobile phones.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
hopekiah
hopekiah
Accepted Answer Pending Moderation
0
Votes
Undo
THanks, Ciarán,
I did what you suggested. We're getting there. If you shrink the page, there is some responsiveness now. Don't do any more troubleshooting for me, however, until I find out if there will be three columns or four when we finish.
-Hope
  1. more than a month ago
  2. Commercial Templates
  3. # 2
  • Page :
  • 1


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