Close

Account

Documentation

Forum

Menu

Creating a Responsive galleryw with Revolution Slider

  • Post count: 94
    dmitri1999
    February 13, 2015 at 7:45 pm #9249

    Hi,
    So I am attempting to create a full screen responsive gallery and so far I haven’t found the settings I need to make it work.
    Here are the details:

    1. Images must not stretch to full screen and basically be in “contain”
    2. Must resize on different screen sizes,including mobile
    3. No weird lines at the top or bottom
    4. Must not cut any portion of an image. I tried a few options,but a lot of them cut the top and bottom on desktop,while looking ok on mobile.
    I tried to put #header or .header in the appropriate field in the settings, in hopes of this being the issue, but that doesn’t seem to be doing anything.
    so far the issue can be seen at the following url:
    http://goo.gl/4SpuZJ
    All images are max 1400pix wide and 1200pix tall

    The slider is set to “auto responsive” but it’s not really responsive. it doesn’t resize properly on desktop and there’s a scroll bar there that I need to use to use. Perhaps there’s a code I can enter or a setting to apply so that the slider would automatically snap to whatever the screen size of a browser is?
    It looks nice on mobile,but there’s a lot of space at the bottom and the navigation arrows are way off.

    Here’s an idea of the type of responsiveness I am after:
    http://goo.gl/g85CNa

    • This topic was modified 2 years, 9 months ago by  dmitri1999.
    • This topic was modified 2 years, 9 months ago by  dmitri1999.
    Post count: 6364
    Adek
    February 16, 2015 at 9:03 am #9374

    Hi dmitri1999,

    Unfortunately, at the moment there is no option to achieve that. To achieve that you will need do some customization with several file in these theme. In this case to get what you need like you say on above with those gallery page. There is only Fullscreen (Slider) – Video & Image Slider page template that i can suggest to you.

    Thank you

    Post count: 94
    dmitri1999
    February 18, 2015 at 5:26 am #9421

    Hello,

    With a bit of playing around I got it to a state I am comfortable with.
    There are 2 issues however that seem to be created by the logo/header

    1. On Desktop the images in the gallery ( http://goo.gl/4SpuZJ ) are cut/cropped at the top as they are behind the header logo instead of being under.
    How do I move the images a bit down to avoid this? I’d like them to either snap right under the header logo

    2. On mobile, you’ll see a few pixels of white space at the top and at the left side of the header logo. It seems like a bug perhaps – the logo is misaligned? How can that be fixed? You also have the same problem in your demo as well. I am viewing on Galaxy S3 phone

    3. There’s a lot of “flashing” on mobile when I try to scroll. I suppose because the logo is being hidden under the images. Is there a way to avoid this? I suppose one way of doing it is have images appear under the logo can solve this.

    Post count: 6364
    Adek
    February 20, 2015 at 5:47 am #9459

    Hi dmitri1999,

    1. You can try to use this css code below :

    2. I’m not quite sure about that. Can you help me to provide an image about those issue?

    3. You can use this css code below to avoid the flashing on header menu section.

    Thank you

    Post count: 94
    dmitri1999
    February 20, 2015 at 7:03 am #9465

    Hi,
    Thank you, I’ll try the codes

    About the mobile issue. I couldn’t see it on any online tests websites which let users see websites in different resolutions. So I just grabbed a screencap and photoshopped exactly what it looks like on my Galaxy s3.
    Images are side by side – note the white line at top and left side
    http://i61.tinypic.com/10pr75z.jpg

    Post count: 94
    dmitri1999
    February 20, 2015 at 7:26 am #9466

    I checked the codes and the
    1. css code 1 works as it lets the image slides down more,but seems like it adds a scroll bar for the extra distance that is being moved from under the header. Is there a way perhaps to get rid of the scroll bar so that the images are exactly at full screen?

    3. css code also works in a sense there’s no flashing as image is being hidden behind the header. And here’s starts another issue- image is being hidden behind an image, which doesn’t look great. Can the images just stay under the header so that when I slide up, I can have the full screen on mobile and still see the full image?

    Post count: 6364
    Adek
    February 21, 2015 at 9:17 am #9507

    Hi dmitri1999,

    I’m not quite sure about that. It seems you will need to make maybe js code to detect window screen resolution, so your image can display fullscreen on desktop and mobile preview.

    Thank you

    Post count: 94
    dmitri1999
    February 21, 2015 at 5:32 pm #9519

    Alright, I’ll look into it.

    Also, in here I created a gallery with a different slider,but it doesn’t seem to be hiding the navigation panel on mobile phones. It is always on top, making images in horizontal mode pretty small because of it.
    Is that something that can be edited in the theme or is it an issue from a slider? Here’s an example.
    http://goo.gl/InwSfV

    Post count: 6364
    Adek
    February 25, 2015 at 6:43 am #9611

    Hi dmitri1999,

    i’ve been check those page previously, but i get 404 page in there. Can you provide another?

    Thank you

    Post count: 94
    dmitri1999
    February 25, 2015 at 5:18 pm #9630

    Hi,
    I was able to get the last thing sorted out.

    The most pressing issue left right now is the mobile header which is misalligned.

    Post count: 6364
    Adek
    February 27, 2015 at 11:25 am #9681

    Hi dmitri1999,

    As i said previously, i still get 404 page in there. You can take a look on image below

    Thank you

    Post count: 94
    dmitri1999
    February 27, 2015 at 3:38 pm #9686

    Dek Ery, yes, I know as the gallery is deleted.
    You can still go to home page or view this page on a mobile website and the misalignment is still visible – it was not just visible in this gallery but the whole website.

    Post count: 6364
    Adek
    March 2, 2015 at 8:25 am #9719

    Hi dmitri1999,

    Please try to use this code below :

    Let me know if those code works or not.

    Thank you

    Post count: 94
    dmitri1999
    March 15, 2015 at 8:56 pm #9987

    Hey,
    I tried it and it isn’t working

    Post count: 6364
    Adek
    March 16, 2015 at 7:48 am #9999

    Hi dmitri1999,

    Can you help me to provide the url of those page that problem persist. I will check it further.

    Thank you

You must be logged in to reply to this topic.