Responsive Gallery on mobile devices

open (8 posts) (2 voices)

  1. Showoffmedia
    Member

    I there.

    I have a problem. I have a lot of galleries in my portfolios, and to beging with, i had disabeled the galleries at mobile devices, but now i want people to see them here as well. But now my galleries isn't responsive, and the gallery fills much more then the screen. How can a get i responsive?

    http://aalborg-furnished-apartments.dk/portfolio/gammel-ostergade-3a-1-tv/

    Posted 1 year ago #
  2. OnePressTech
    Member

    The following css added in your mysitemyway custom css section should fix things reasonably well:

    .galleria-container{
    max-width:100%;
    }
    div[id^=galleria_]{
    max-width:100%;
    }

    Posted 1 year ago #
  3. Showoffmedia
    Member

    Thank you so much, it helped.

    Now i then have a question about the height. When i see it on a mobile phone, the pictures are very heigh. The with is 100%, now can i set a fixed height when seen on a mobile phone?

    Posted 1 year ago #
  4. OnePressTech
    Member

    Not without distorting the pictures. By setting the max-width to 100% it allows the picture height to auto-adjust without changing the aspect ratio.

    If you want your portfolio to have a uniform height you would need to do that manually by ensuring the original images all have the desired aspect ratio.

    Posted 1 year ago #
  5. Showoffmedia
    Member

    But when i see the portfolio the width of the pictureframe is 100%, but not the picture itself! See attached.
    When i see the portfolio at a mobile, i only see a part of the pic, but if i tap the pic i see it at its full width.
    I want to see the portfolio like i see the popup. I hope you understand my request :)

    Attachments

    1. Mobile_pic_popup.jpg (41.5 KB, 0 downloads) 1 year old
    2. Mobile_portfolio_view.jpg (43.5 KB, 0 downloads) 1 year old
    Posted 1 year ago #
  6. OnePressTech
    Member

    Try this CSS combination instead:

    .galleria-container{
    max-width:100%;
    }
    div[id^=galleria_]{
    max-width:100%;
    height:55vw;
    }
    .galleria-image{
    max-width:100%;
    }

    Posted 1 year ago #
  7. Showoffmedia
    Member

    Sadly it didn't work. Most of the pictures is facing lengthwise, but some of them stands up. Can that be the problem??

    Posted 1 year ago #
  8. OnePressTech
    Member

    Sorry it didn't work. I applied these CSS modifications in the browser and it corrected the issues. I'm not sure why the modification didn't work for you.

    Complex CSS can be tricky. The MSMW responsive design needs a full review, correction and testing round.

    Your asymmetrical picture shapes would not be the problem if the CSS / html combo was structured correctly (which it is not). Having said that, I have found that manual adjustment of pictures to be of uniform proportions is the only realistic solution in most cases.

    Posted 1 year ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme