Joomla Templates Club 406,261 posts

[gustavoi Friend gustavoiJoin date: February 2015Posts: 24Downloads:0Uploads:0 Thanks: 7]

#693695

Hi,

I am building a site with the primary need to display a Soccer player catalog grouped by field position.

For that purpose I am using JA Puresite with k2 categories configured by soccer player field position, and items by player,

In the front-end side, when selecting a category and sub category, I need to display so many players as display format permits, ideally 4 colums for full format, 3 columns for tablet an 1 column por mobile, but unfortunately I can not get it to work !

Now when I see it in full format, it displays 4 columns in the right way (image attached) , when I see it in tablet it displays also 4 columns starting to overlap and if I see it in mobile it still display 4 completely overlaped columns (images attached)

Could you help me with reducing to 3 columns for tablet and 1 column for mobile and eliminate overlapping? (on categories and sub categories)

Thanks in advance

Gustavo

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#693779

Hi,

I tried to access frontend and backend of your site with username/password included on thread but without success, you can check and give me correctly.

In this case, I need to check the problem directly on your site.

Regards

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#750133

Hi Gustavo,

In this case, I need to check the problem directly on your site.

I tried to access frontend and backend of your site with username/password included on thread but without success, you can check and give me the correct one.

Regards

[gustavoi Friend gustavoiJoin date: February 2015Posts: 24Downloads:0Uploads:0 Thanks: 7]

#694920

Hi,
Sent on private, please let me know if you get it.

regards
Gustavo

[gustavoi Friend gustavoiJoin date: February 2015Posts: 24Downloads:0Uploads:0 Thanks: 7]

#750444

Hi,
Sent on private, please let me know if you get it.

regards
Gustavo

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#695322

Hi Gustavo,

You can use the css below to fix the problem on your site

Open templates/ja_puresite/css/k2.css file and add new rule

span.catItemImage {
padding-left: 0px !important;
text-align: left !important;
}

div.catItemIntroText {
padding: 0px !important;
}

div.catItemExtraFields, div.genericItemExtraFields {
margin: 0px !important;
padding: 0px !important;
}

Once done, remember to clear cache from admin area

Regards

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#750563

Hi Gustavo,

You can use the css below to fix the problem on your site

Open templates/ja_puresite/css/k2.css file and add new rule

span.catItemImage {
padding-left: 0px !important;
text-align: left !important;
}

div.catItemIntroText {
padding: 0px !important;
}

div.catItemExtraFields, div.genericItemExtraFields {
margin: 0px !important;
padding: 0px !important;
}

Once done, remember to clear cache from admin area

Regards

[gustavoi Friend gustavoiJoin date: February 2015Posts: 24Downloads:0Uploads:0 Thanks: 7]

#695460

Hi Ninja,

I have edited k2.css as you indicated and it is even worst. (images correspondig to full size, tablet ando mobile layout are atached)

I wish to have been clear with my description about the problem. it in not an alignment problem in the full sized screen layout (default), it is a problem when tablet and mobile layout is used (I nedd to display k2 items only in 3 colums when in tablet layout and only in 1 colum when in mobile layout)

Regards

Gustavo

[gustavoi Friend gustavoiJoin date: February 2015Posts: 24Downloads:0Uploads:0 Thanks: 7]

#750656

Hi Ninja,

I have edited k2.css as you indicated and it is even worst. (images correspondig to full size, tablet ando mobile layout are atached)

I wish to have been clear with my description about the problem. it in not an alignment problem in the full sized screen layout (default), it is a problem when tablet and mobile layout is used (I nedd to display k2 items only in 3 colums when in tablet layout and only in 1 colum when in mobile layout)

Regards

Gustavo

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#695573

Hi Gustavo,

I just added css style below into templates/ja_puresite/css/k2.css file on your site.


.catItemView {
width: 100% !important;
}


Now, you can see it’s working fine

Regards

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#750722

Hi Gustavo,

I just added css style below into templates/ja_puresite/css/k2.css file on your site.


.catItemView {
width: 100% !important;
}


Now, you can see it’s working fine

Regards

[gustavoi Friend gustavoiJoin date: February 2015Posts: 24Downloads:0Uploads:0 Thanks: 7]

#695737

Thanks for your configuration changes, they improved the rendering with 4 columns.

My problem tough is that I would like to see the 4 colums with a normal layout (PC screen size), 3 columns when it’s a tablet layout and just one column when mobile. What happens now is that when i Change devices (tablet and mobile) you still see the 4 columns.

regards
Gustavo

[gustavoi Friend gustavoiJoin date: February 2015Posts: 24Downloads:0Uploads:0 Thanks: 7]

#750806

Thanks for your configuration changes, they improved the rendering with 4 columns.

My problem tough is that I would like to see the 4 colums with a normal layout (PC screen size), 3 columns when it’s a tablet layout and just one column when mobile. What happens now is that when i Change devices (tablet and mobile) you still see the 4 columns.

regards
Gustavo

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#695766

<em>@gustavoi 496012 wrote:</em><blockquote>Thanks for your configuration changes, they improved the rendering with 4 columns.

My problem tough is that I would like to see the 4 colums with a normal layout (PC screen size), 3 columns when it’s a tablet layout and just one column when mobile. What happens now is that when i Change devices (tablet and mobile) you still see the 4 columns.

regards
Gustavo</blockquote>

Hi,

Yes, you had it on your site and you can find and see my solution directly from templates/ja_puresite/css/k2.css file

@media (max-width: 767px) {
#itemListLeading .itemContainer {
width: 100% !important;
}
}
@media (min-width: 768px) and (max-width: 979px) {
#itemListLeading .itemContainer {
width: 33% !important;
}
}


Regards

1 user says Thank You to Ninja Lead for this useful post

1. gustavoi

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#750835

<em>@gustavoi 496012 wrote:</em><blockquote>Thanks for your configuration changes, they improved the rendering with 4 columns.

My problem tough is that I would like to see the 4 colums with a normal layout (PC screen size), 3 columns when it’s a tablet layout and just one column when mobile. What happens now is that when i Change devices (tablet and mobile) you still see the 4 columns.

regards
Gustavo</blockquote>

Hi,

Yes, you had it on your site and you can find and see my solution directly from templates/ja_puresite/css/k2.css file

@media (max-width: 767px) {
#itemListLeading .itemContainer {
width: 100% !important;
}
}
@media (min-width: 768px) and (max-width: 979px) {
#itemListLeading .itemContainer {
width: 33% !important;
}
}


Regards

1 user says Thank You to Ninja Lead for this useful post

1. gustavoi

[Author]

Posts