Different Blog Layout for desktop and smartphone

  • Resolved belerad

    (@belerad)


    2 years, 10 months ago

    Hello there,

    i am looking for a little help for a problem i have. For the last week i was sitting at home, because of quarantine measures and got a lot of time, to bring my personal blog to a point, i am happy with. Now there is basically just one thing really bothering me.

    I choosed the Blog layout, where the image is besides (changing) the title, what i really like, because it is not so overburdened. The problem is, the format is not good to look at, on smartphones. Because of the smaller, and vertical display ratio, the pictures are getting way to small.

    So i would like to change the layout on the smartphone, to different one, where the picture is above, while the layout for bigger screens should stay in the origin form, if this is possible.

    Thanks in advance
    Marcus Grech

    • This topic was modified 2 years, 10 months ago by belerad.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @belerad,

    If I could get your query correctly, you’d try adding this CSS code to Appearance > Customize > Additional CSS from dashboard. 

    @media only screen and (max-width: 600px) {
  .content-area.layout6 article {
    display: block;
  }
  .content-area.layout6 .hentry .list-content,
  .content-area.layout6 .hentry .list-image.image-left {
    width: 100%;
    max-width: 100%;
  }
  .content-area.layout6 .hentry .list-image .entry-thumb {
    margin-left: 0;
    margin-right: 0;
  }   
}
    Thread Starter belerad

    (@belerad)

    Works just perfect, thanks a lot ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Different Blog Layout for desktop and smartphone’ is closed to new replies.