How to re-centre images

  • Resolved legoman57

    (@legoman57)


    4 years, 7 months ago

    Hi,

    Thanks for the widget, enjoying it so far. Using it on the Colorlib Activello theme if that makes a difference, latest version of WP.

    I am trying to change the widget using some custom CSS to display a 2×3 (2 rows, 3 columns) grid on tablet view instead of the default 3×2. I can get 3 columns to appear successfully but I have not worked out how to reduce the row height. The two rows instead occupy the original three-row height. Is there a simple CSS fix to scale down the height of the rows to address this?

    Regards,
    Chris

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Smash Balloon Mike

    (@smashballoonmike)

    Hey @legoman57,

    Thank you for reaching out to us. Glad to hear you are enjoying the plugin, we love to hear positive feedback like this!

    To better assist you with your question can you provide a link to the page where you are displaying the feed? Please note, if you are using the Pro version of the plugin you will need to open a support request on our website here: https://smashballoon.com/instagram-feed/support/ as this forum is intended for the free plugin.

    Many thanks, hope you are having a great night!

    Thread Starter legoman57

    (@legoman57)

    Hi Mike, thanks for the speedy reply.

    Here is the page link:

    https://justacoupleofdumbos.epizy.com/

    I am currently using the free version of the plugin.

    Regards,
    Chris

    Plugin Support Smash Balloon Mike

    (@smashballoonmike)

    Hey @legoman57,

    Thank you for sending this over. Can you clarify if you only want there to be 3 columns on tablet or do you also want 3 columns on desktop and mobile as well?

    Many thanks, hope you are having a great day!

    Thread Starter legoman57

    (@legoman57)

    Hi Mike,

    I would prefer tablet only please, if at all possible.

    Thanks,
    Chris

    Plugin Support Smash Balloon Mike

    (@smashballoonmike)

    Hey @legoman57,

    Thank you for the clarification. Can you try adding the following to our plugins Custom CSS section by going to WordPress Dashboard > Instagram Feed > Customize > Misc > paste the code into?Custom CSS?> click?Save Changes.

    @media all and (max-width:700px) and (min-width:400px){
#sb_instagram.sbi_col_3 #sbi_images .sbi_item,
#sb_instagram.sbi_col_4 #sbi_images .sbi_item,
#sb_instagram.sbi_col_5 #sbi_images .sbi_item,
#sb_instagram.sbi_col_6 #sbi_images .sbi_item,
#sb_instagram.sbi_col_7 #sbi_images .sbi_item,
#sb_instagram.sbi_col_8 #sbi_images .sbi_item,
#sb_instagram.sbi_col_9 #sbi_images .sbi_item,
#sb_instagram.sbi_col_2 #sbi_images .sbi_item{
width: 33.3%;
}
}

    Let me know if you run into any issues or have any additional questions. Hope you are having a great day!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to re-centre images’ is closed to new replies.