1. crimle
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Monday, 12 December 2022
  5.  Subscribe via email
Hi Ciaran

I am using J51_Skylar_J4 1.1.7. We have a 2-columns blog. This first column is ok. But the second column does not respect the max-width of the template. I don't find out why.

Thank you and kind regards
Chris
References
  1. https://j4.ttcuster.ch/galerie/sportanlaesse
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Chris

Thank you for the update. Could you try the following instead...

.blog-items.columns-2 {
grid-template-columns: 50% 50%;
column-count: auto;
column-gap: 1rem;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

I'm afraid I have to come back to this topic again. The css code you proposed above has the side effect of enforcing the two-column blog layout on mobile screens as well. So I added a media query in order to avoid these two columns:

@media only screen and (min-width: 959px) {
.blog-items.columns-2 {
grid-template-columns: 50% 50%;
column-count: auto;
column-gap: 1rem;
}
}

I hope I did it right?!
The unwanted two-column layout for mobile screens needs to be taken into account, if you are planning to implement this amendment to a future version of this template.

Thank you and kind regards
Chris
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Chris

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.blog-items.columns-2 {
grid-template-columns: 50% 50%;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

This results in the column extending slightly less far beyond the template border. But it's still too wide and doesn't really fit within the boundaries of the template. Or rather: it does not respect the padding of the template border.

Thank you and kind regards
Chris
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Yes! It is perfect now.

Thank you very much and kind regards
Chris
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Chris

Thank you for sharing your solution. That looks perfect, you are ensuring the CSS is only applied to screensizes above 959px in width.

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


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

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok