Responsive layout of archive-pages

  • Resolved jadi100

    (@jadi100)


    8 years, 10 months ago

    Hi,

    on the blogs archive-pages image and text of a single article stand side by side and it looks fine on a desktop-screen. When these pages shrink to tablet or smartphone layout, this array persists with the effect, that the width resp. lenght of images and text-rows become very small, too small.
    How to add a hard return between text and image, so one is below the other in tablet or smartphone layout? That would look much nicer.

    Thanks for a hint.

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

  • Post your site address

    Thread Starter jadi100

    (@jadi100)

    Hi again,
    my page will go online, when everythng works. But I found a solution, simpler than I thought – just custom css:

    @media only screen and (min-width:200px) and (max-width:1118px)
    {
    #custom #post-entry div.post-thumb {width: 100%; margin-bottom:10px;}
    #custom #post-entry article .post-right {margin: 0 0 ;float:none;width:auto;}
    }

    The version I finally used has a few more arguments, but just to show the principle. Works fine for me.

    Theme Author Richie KS

    (@rkcorp)

    that should work but if you want to limit it to mobile only, it should be

    @media only screen and and (max-width:600px)
    {
    #custom #post-entry div.post-thumb {width: 100%; margin-bottom:10px;}
    #custom #post-entry article .post-right {margin: 0 0 ;float:none;width:auto;}
    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive layout of archive-pages’ is closed to new replies.