Full Width Draw Attention

  • Resolved arejones

    (@arejones)


    3 years, 6 months ago

    How can I get my draw attention image to fill the width of the screen?

    It is added to the page as a draw attention block, but there is no option during page editing to make it full width as it is with other block types.

    I can’t work out what custom CSS might be needed to maximise the width. The image uploaded is larger than how it is being displayed. Not sure if the theme is affected it or I need to do something else.

    Thanks in advance!

    • This topic was modified 3 years, 6 months ago by arejones.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Draw Attention Support

    (@wpdrawattention)

    Hello @arejones

    The Draw Attention image size is dependent on two things: 1) Original image size and 2) the theme’s container holding the draw attention block (this is what will need to be set to full-width).

    None of the Draw Attention CSS will affect whether it shows at full width.

    I took a look at your page and the image you’re using is a good size (1920×1080) but I do see a lot of modifications to the containers and the Draw Attention image itself.

    For example, I see that the max-width is set to 920px in the .content-area holding the image.

    Could you contact our support email at [email protected]? We can help you get this page back on track.

    Hi,
    I have an image with links on the homepage. I would like to make the image full screen but haven’t been able to find out how. I’ve set the Avada theme container to full screen but the image is still contained by Draw Attention somehow.
    Here’s the site https://terihitt.com/

    Do you know how I can get this image full screen?

    Thank you for such a cool plugin!

    Plugin Author Natalie MacLees

    (@nataliemac)

    @teri7 Taking a look at your site, it looks like the image you uploaded is 993px x 667px. Draw Attention images are responsive, but will never increase the display of your image beyond what was originally uploaded.

    If you’d like the image to appear larger, you’ll need to upload a larger version of the image.

    Please let us know if you need more help.

    Hi, We like to make the image full screen and full width. We have added an image of size 4096 by 2160 pixels, and also theme page is set to full-width content but on the website, the image does not showing full size. we have hidden the sidebar by adding a “display none” element but the image is not getting full screen and width. here is the website magison.fr please help us to make the image full width. And also how to make image background transparent. Thanks

    Plugin Author Natalie MacLees

    (@nataliemac)

    @bloch11 If all of your hotspots are URL hotspots, then the image will be full width and the sidebar hidden automatically. Currently, three of the hotspots are set to show more info when clicked, and that’s why the sidebar was still visible.

    Hiding the sidebar with display:none doesn’t re-adjust the width of the image, so I’d recommend removing that CSS and just making sure all of the hotspots are set to go to a URL rather than to Show More Info. That should accomplish both hiding the sidebar without the need for any additional CSS and freeing up the image to fill the width of the screen.

    Let us know if you need any further help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Full Width Draw Attention’ is closed to new replies.