× Discussion about "Leafs" Joomla template

How to make 3-column blog layout display as 1-column on small media (eg phone)

More
2 months 1 week ago #47483 by Danimeeka
Hi,

I have a 3-column blog layout here: historicwinton.org/hw-joomla/the-event/news-media-releases

On an iPhone this is too squashed. How do I make the blog render as 1 column on a smart phone but 3-column on a desktop?

Thanks,

Julia.

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #47484 by Danimeeka
The same applies to my other blog page:

historicwinton.org/hw-joomla/competitors

This also does not render well (has lots of overlapping) on a phone screen.

Thanks,
julia.

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #47485 by milos
Hi Julia,

You can add this in CSS file:
@media (max-width: 500px) {
  .items-row .span4 {
    width: 100%;
    margin-left: 0;
    margin-bottom: 30px;
  }
}

Value 500px is the maximum screen width value to apply this change.

Best regards,
Milos

Please Log in or Create an account to join the conversation.

More
2 months 6 days ago #47486 by Danimeeka
That works perfectly. Thank you Milos!

Best regards,
Julia.

Please Log in or Create an account to join the conversation.

Moderators: milos
Time to create page: 0.105 seconds