Presentation images – full width

  • Resolved alvaradopau

    (@alvaradopau)


    2 years, 9 months ago

    Hi there! I’m trying to have a slideshow as the opener for my page, I’m working with WordPress blocks with the 2022 Theme. I want it to be full-width and I’ve set it up that way in the block options but the images are still scaled down (they are the right size, and the image size option of the slideshow is set to full).

    The problem seems to be a ‘figure’ container: .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure. It is also set to 100% width, even though when I hover on it on Developer mode it shows two columns on the sides where I would like the image to spread. I’ve tried to add this CSS to the Additional CSS options to no avail:

    figure {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    }

    Is it possible to have the slideshow as full width? Any ideas?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @alvaradopau

    You can add CSS code to your site using the CSS Editor in Appearance → Customize → Additional CSS . Add this code in the box:

    /* Slideshow Full Width block: make the images full width as well | 31066278-hc */
    .wp-block-jetpack-slideshow.alignfull .wp-block-jetpack-slideshow_image {
    width: 100vw;
    max-width: unset;
    object-fit: cover;
    }

    Let me know if you have any questions.

    My best regards.

    Thread Starter alvaradopau

    (@alvaradopau)

    Hi @deathlynotes, and thank you, I tried it but it didn’t work ??

    I did try a lot of css tweaks before writing the message and none worked as desired…

    Anonymous User 18700194

    (@anonymized-18700194)

    Hi @alvaradopau –

    On a test site, I was able to accomplish this with the following code:

    .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image {
 object-fit:cover;
 width:100vw;
}

    Could you give this a try? If it doesn’t work, could you share a live URL so that we can see if something else is going on here?

    Thread Starter alvaradopau

    (@alvaradopau)

    Hi @bobmatyas ! I’m afraid that didn’t work either… I’ve set up a collaborator user and password in case you want to check it, the site is online but hidden with a coming soon plugin, once logged in you should be able to see it:

    Thanks!

    • This reply was modified 2 years, 9 months ago by James Huff. Reason: password removed from public forum
    Anonymous User 18700194

    (@anonymized-18700194)

    Hi @alvaradopau –

    Please delete the test user that you made ASAP. It isn’t safe to create an account and post it on a public forum.

    You might try adding !important to the CSS code above, but unfortunately, we can’t help beyond that as per our scope of support we aren’t able to help with cosmetic changes to your site.

    If you are unable to write custom CSS to fix this, I recommend that you reach out to a developer for assistance.

    It is also possible that another user here may respond with custom code for you.

    Plugin Support lastsplash (a11n)

    (@lastsplash)

    Hi there,

    It has been more than one week since we have heard from you, so I’m marking this topic as resolved.

    But if you have any further questions or need some more help, you’re welcome to reply here or open another thread.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Presentation images – full width’ is closed to new replies.