Home Forums Themes Support Gecko Instagram fixed size

Topic Resolution: Resolved

Tagged: 

This topic contains 14 replies, has 2 voices, and was last updated by  theSA 2 weeks, 5 days ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #31492

    Hi,

    With the Instagram widget there are fixed sized to chose from. But in the flow allows bigger pictures, i.e. pictures posted with other sizes than 1×1. (see image below)

    How do I fix the sized on the webpage so that it overrides the picture size when other on Instagram?

    + Are you planning to add a feature where I can chose # to show in the instagram flow?

    Image where the sizes are not fixed to 1x1

    #31493

    Hi SA,

    1. Please try add below code to JanStudio > Theme Option > General Layout > Custom CSS

    @media only screen and (min-width: 1025px) {
    .jas-sc-instagram .slick-slide img {
    	max-width: inherit;
    	height: 300px;
    	width: auto;
    }}

    2. Could you please explain about “Are you planning to add a feature where I can chose # to show in the instagram flow”

    Thanks

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31494

    Hi,

    1. The code worked to force 1×1. But it added margins in a very strange way (see below image)

    2. I’d like to add an instagram feed based on one or several hashtags, e.g. in our instagram feed we post with various hashtags related to each product i.e. #lårskav for one product and #skoskav for another. I’d like to be able to add just the post related to for instance #lårskav to the landing page that promotes products for lårskav.

    After CSS change

    #31497

    Hi,

    Could you send me the link where show your Instagram Feed.

    Thanks

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31498
    This reply has been marked as private.
    #31499

    Could you send me login credential and set as private reply. We will update the fix.

    Thanks

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31500
    This reply has been marked as private.
    #31501

    I tried this account but can’t access, could you check and send me again.

    Thanks

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31502

    I re-wrote the password. And I’ve logged in with the credentials. So now I know for sure it works.

    #31505

    Hi,

    please change prev code to

    @media only screen and (min-width: 1025px) {
    .jas-sc-instagram .slick-slide img {
    	max-height: 320px;
    }}

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31506

    Perfect! Thanks a lot 🙂

    Always a pleasure to get help from you!

    #31509

    You’re welcome.

    Have a great day!

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31529

    Hi,

    I’ve working on another computer today (yesterday an iMac 22″ and today MacBook Air 13″). And on the MacBook the pictures have their orgin sizes (the problem that initiated this topic), i.e. it’s not fixed to 1×1.

    I’ve done to changes to the css-code you made yesterday.

    What can I do?

    Regards,
    Anna

    #31531

    Hi SA,

    Please try change prev code to

    @media only screen and (max-width: 1920px) {
    .jas-sc-instagram .slick-slide img {
    	max-height: 320px;
    }}
    @media only screen and (max-width: 1440px) {
    .jas-sc-instagram .slick-slide img {
    	max-height: 245px;
    }}
    @media only screen and (max-width: 1366px) {
    .jas-sc-instagram .slick-slide img {
    	max-height: 233px;
    }}
    @media only screen and (max-width: 1280px) {
    .jas-sc-instagram .slick-slide img {
    	max-height: 219px;
    }}
    @media only screen and (max-width: 1024px) {
    .jas-sc-instagram .slick-slide img {
    	max-height: 176px;
    }}
    @media only screen and (max-width: 800px) {
    .jas-sc-instagram .slick-slide img {
    	max-height: 277px;
    }}
    @media only screen and (max-width: 768px) {
    .jas-sc-instagram .slick-slide img {
    	max-height: 266px;
    }}
    @media only screen and (max-width: 480px) {
    .jas-sc-instagram .slick-slide img {
    	max-height: 100%;
    }}

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31546

    Thanks! Now it looks great even om my 13″ 😀

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.