Resize the image in fullscreen gallery with a fixed top margin

[Stefano]

Good morning to everyone and happy Christmas. This is my first post and I hope to fulfill the norms of the forum.

I’ve a problem with the resize of the images in the gallery that I’ve set in the homepage of my website (lupedelavallina.com)

In order to cover all the screen the theme I’ve bought resize the image making it exceeding all the margins (top, bottom, left and right). What I’m looking for is avoid that the image exceeds the top margin.

I’ve asked the developer of the theme where I can find the files of the “fullscreen gallery” that I’m using in the home and he told me to look in the php file called gallery-fullscreen-cover-php. Here the code: http://codepen.io/Stefano1982/pen/Lboxww/

Well… I’m not able to find the part of the code that I have to change in order to obtain what I’m looking for… any idea? any suggestion?

Thank you very much for your help!

[Beverleyh]

I’ve asked the developer of the theme where I can find the files of the “fullscreen gallery” that I’m using in the home and he told me to look in the php file called gallery-fullscreen-cover-php.

I think the point of the developer’s reply is that this file contains reference to all the files that make up the fullscreen aspect of the gallery, so you can use this as a signpost in order to further scrutinise all the pieces that contribute to the whole.

I think the file you are looking for is the ‘supersized.css’ file. I would imagine that this is the place where you can modify the styles (or take cues from it to create overrides in a custom stylesheet). I can’t see any gallery when I view your actual site on mobile though (only a white screen) so am unable to comment further. Neither am I a WordPress user so unfortunately I can’t make any educated guesses about anything else you can try.

The only advice I can give you is staple web dev advice of ‘use the developer console’ – F12 in most browsers. You’ll be able to inspect the elements that make up the gallery and modify styles live in the browser. It will tell you which selectors to target and which stylesheet the styles appear in so that you can apply your changes once you’re happy with them.

[Stefano]

Thank you very much Beverleyh.
Actually I supposed that the CSS file I should have checked was supersized.css

BTW, when you write that you can’t see any gallery on my website and only a white screen that makes me worry. My website is https://lupedelavallina.com could you check if it is still a white screen?

About the supersized.css here’s the link of the code: http://codepen.io/Stefano1982/pen/QGRpKm/

How can I avoid the image to exceed the top margin? I think that the clue is in the first part of the code, don’t you think?

[Beverleyh]

I only see a white screen with a grey “LV / menu” bar at the top.

I edited my earlier post so I’m not sure if you saw – it’s likely we were both online together so I’ll repeat it below;

The only advice I can give you is staple web dev advice of ‘use the developer console’ – F12 in most browsers. You’ll be able to inspect the elements that make up the gallery and modify styles live in the browser. It will tell you which selectors to target and which stylesheet the styles appear in so that you can apply your changes once you’re happy with them.

Unfortunately I can’t really comment on the CSS alone because I can’t see the markup, or any other CSS that may apply from elsewhere. #supersized img might be the selector to concentrate on, maybe with a top margin to act as offset?

[Stefano]

Thank you! May I ask you from which browser are you checking my website?

[Beverleyh]

Safari in iOS 10.2 (iPhone 6S Plus)

[Stefano]

Thank you Beverleyh…
I’m try to fix the problem looking for an emulator of Safari in iOS 10.2 (iPhone 6S Plus)
And I’m also trying to set the supersize.css in order to obtain what I’m looking for.
Unfortunately it’s not so easy.
Happy Christmas!

[Stefano]

Beverleyh… could you please try to load my web with your phone, now?

I think I’ve fixed the problem. Am I right?

[Beverleyh]

Sorry, still white IMG_0095.png

[Stefano]

Mmmmm… I’m pretty sure it’s a cache issue… I’ve checked the web with emulators and with an iPad and everything goes perfectly.
:(

[Shikkediel]

Nothing but a white page and header here too. And these errors in the Firefox console:

[Beverleyh]

Still white I’m afraid – I even pulled out my iPad (which I haven’t used for a week or so) and loaded the page afresh so you can see on a different resolution screen IMG_0047.png

[Stefano]

Shikkediel… thank you very much for your help and for sending me the error list.

Could you check now my web and tell me if there’s still something wrong? (Please delete the cache)

I guess I’ve fixed everything (or pretty everything)

[Shikkediel]

Looks perfectly fine now, no more errors either.

[Stefano]

Awesome! And are you able to see the images of the site?

[Author]

Posts