Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Resize the image in fullscreen gallery with a fixed top margin

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #249299
    Stefano
    Participant

    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!

    #249300
    Beverleyh
    Participant

    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.

    #249301
    Stefano
    Participant

    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?

    #249302
    Beverleyh
    Participant

    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?

    #249303
    Stefano
    Participant

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

    #249304
    Beverleyh
    Participant

    Safari in iOS 10.2 (iPhone 6S Plus)

    #249306
    Stefano
    Participant

    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!

    #249309
    Stefano
    Participant

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

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

    #249313
    Beverleyh
    Participant

    Sorry, still white IMG_0095.png

    #249314
    Stefano
    Participant

    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.
    :(

    #249315
    Shikkediel
    Participant

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

    #249316
    Beverleyh
    Participant

    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

    #249318
    Stefano
    Participant

    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)

    #249319
    Shikkediel
    Participant

    Looks perfectly fine now, no more errors either.

    #249320
    Stefano
    Participant

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

Viewing 15 posts - 1 through 15 (of 18 total)
  • The forum ‘CSS’ is closed to new topics and replies.