How to make a gallery slider full page width

#1

I would like to be able to insert a full width responsive gallery on client pages, but do it from within the CMS.
Basically it has to be able to be outside of the column that contains the main page content - which is of course not full width. Thats the issue - in that $content tag has to be inside that.
Is there a way anyone knows - using the standard Pulse template that would work?
Thanks

#2

That won't work. You'd have to change the template to full width in order to be able to do that, and in addition wrap every other content block inside a container to restrict the width again.

#3

Hi thanks, I was thinking that too.
Was wondering though whether there was any way to make a css override and put the gallery tag into a div that would break out of the layout.
But I am not a CSS wiz.
Clearly :confused:

#4

You aren't able to override the outer div's max width.

#5

You can do this but it requires a bit of CSS calc voodoo.
Here's an example to get you started.

#6

Ah, thanks very much Tim
I have tried implementing that with a static image here:

https://www.piratesofthecarabina.org.uk/privacy

and the picture has certainly broken out of the main content, but its not going full width.

#7

A couple of things that need fixing;

  1. Your column width is 1140px wide rather than my 800px example. Change out the values in the CSS.
  2. You have a fallback style of img { max-width: 100%; } which prevents the image getting bigger than 100%. Add an override in the .slider img style media query to reset this to 100vw;
    .slider img { max-width:100vw }
    That should get you closer to where you want to be.
#8

Ah yes, I see, thanks for pointing that out.
This now works a treat for a single image:

https://www.piratesofthecarabina.org.uk/privacy

but I tried it with a Pulse gallery slider

https://www.piratesofthecarabina.org.uk/test2
and its not there. Its still being contained. I shall need to delve into that a bit more

closed #9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.