Home Forums Archived Forums Mobile View Image size – mobile view

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #19587
    Madling
    Participant

    I would like to center the two colomns of recipes and have the images as large as possible, so they fill out the screen (mobile view).

    Is that possilble? 

    One of the pages 

    #30850
    Weaver
    Keymaster

    Two (even three sometimes) columns work okay on tablets, but not on phones which should be one column. Image size is dependent on how you insert the images from the media library – pick a suitable size and alignment. There is a nice 2-column option in Weaver Xtreme that will be 2 cols on desktop and 1 on mobile.

    The option is Content Area : Text : Columns

    Your link does not work.

    #30851
    Madling
    Participant

    Thank you for your answer. 

    I have four columns on desktop and two on mobile. That works out fine, but I would like the images to be larger (from mobile view) 

    Sorry, now the link works. 

    #30852
    scrambler
    Moderator
    Right now, you page is not set for any fixed number of columns, instead, images are inserted with a fixed width. The number of columns only depends on the size you used to insert your images and how many can fit side by side for any given browser width.

    Right now your images are 150px wide, so  4 can fit side by side on desktop. As you reduce the width of the browser,4 wont fit side by side so it will go to three, with an empty space on the right. Keep reducing and the space will get smaller, until 3 don’t fit and it goes to Two side by side with empty space on the right again.

    If you want your images to fully occupy the space on phone, you need bigger images. But because you have no defined number of columns, that would cause the desktop to only have 3 columns as four of the bigger images would not fit side by side.

    The way to solve that issue it to use larger images, but force them to scale into a specific number of column, by replacing the fixed width on their container (150px) right now by a % width, and change that %width on the various device sizes.

    So reinsert your images at twice their size, like 300px. Then add the custom CSS below to create the right number of column on each device

    div.wp-caption {-moz-box-sizing:border-box;-web-box-sizing:border-box;box-sizing:border-box;}
    @media only screen and (min-width:768px) {
    div.wp-caption {width:25% !important;}
    }
    @media only screen and (max-width:767px) {
    div.wp-caption {width:50% !important;}
    }

    The CSS would be a lot easier on Xtreme, you really need to switch  🙂
    #30853
    Madling
    Participant

    Thank you for your help and explanation 🙂

    I did a test here 
    It looks much better – but the pictures are a bit too close. 
    Will changing the image size create more space between the images on mobile and desktop?

    I am not familiar with Xtreme thats why I still use Weaver II 🙂 

    #30854
    scrambler
    Moderator

    Add padding to the div with the rule below and the value(s) you like.

    div.wp-caption {padding:10px;}

    Also avoid caption that could get on two lines on mobile or you may break the rows with images that but against the higher caption, and you will need to use I think I gave you another time to set the height of the caption to two line

    #30855
    Madling
    Participant

    Thank you for the padding rule 🙂

    1.
    I have used the other rule (maybe in a wrong way), because I can’t see the difference.

    But…

    Some of the text need to be on two lines – otherwise it will get too small. 

    2. I am still struggling to keep the images in line. Link
    Is there an easy way to to keep them in line regardless if they have one or two lines (text)?   

    #30856
    scrambler
    Moderator

    It is just that you did not increase the min-height enough for two  lines.

    Also, given you are causing more space on single lines, you may want to decrease / remove the bottom padding.

    Change the min height rukle to the one below

    .wp-caption p.wp-caption-text {min-height:45px;padding-bottom:0;}

    You can further reduce the vertical space with

    .wp-caption {margin-bottom:0;}

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘ Mobile View’ is closed to new topics and replies.