Right Side Gutter overlaps Embed on Mobile
Closed this issue · 4 comments
Can we reduce the right padding used for the right side gutter on mobile devices with small screen widths?
The right side gutter is overlapping the iDonate embed when viewed on phone screens with a width of less than 372 pixels, such as the Samsung Galaxy S5 and S6 and iPhone 5.
Example (using Chrome Dev Tools device emulation and the WSU Spine):
There appears to be extra padding that is overlapping the embed on the div with the class "column one".
If I adjust the padding-right to 1rem, the overlap goes away.
I am not exactly sure if your using WordPress to embed your iDonate. If you are, we have an option in customize to adjust the padding under Style Options. I believe it adds the class .spacing-tight to the #jacket.
We (the WSU Foundation) are embedding iDonate in the WSU WordPress site using this shortcode.
The problem with changing that option is that it reduces the space on the left side as well as the right side and makes the content looked "squished".
Can the shortcode change or override that setting or is it something that would have to be changed in the theme?
It looks like Nate left a way to do a narrow gutter on https://github.com/washingtonstateuniversity/WSU-spine/wiki/II.2.-Page:-Size,-Layouts,-and-Grids#gutters.
If that doesn't help then I would probably target the section with section.customclass.side-right.gutter .column.one:not(.gutterless){padding-right:1em;}
Thanks, that link and code example were what I needed to get the embed working with my plugin.