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

Danimeeka
Active member
Topic Author
Member

5 years 9 months ago #47483 by Danimeeka

How to make 3-column blog layout display as 1-column on small media (eg phone) was created 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 to join the conversation.

Danimeeka
Active member
Topic Author
Member

5 years 9 months ago #47484 by Danimeeka

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

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 to join the conversation.

milos
Support Staff
Moderator

5 years 9 months ago #47485 by milos

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

Hi Julia,

You can add this in CSS file:

Code:

@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 to join the conversation.

Danimeeka
Active member
Topic Author
Member

5 years 9 months ago #47486 by Danimeeka

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

That works perfectly. Thank you Milos!

Best regards,
Julia.

Please Log in to join the conversation.

Time to create page: 0.279 seconds