|
Marcel Wepfer
|
May 5, 2015 at 12:23 am
Hi there
Our website shows 6 events by using the grid view template (http://kino.sevenskills.ch/). When scaling down the browser, the pictures do not always fill out the whole screen because we had to give them fixed width (different ones for each responsive breakpoint, but all are constant).
Do you know of a possibility to give them relative width (in percentage)? We tried several things but it was either misinterpreted oder the pictures were arranged one below the other. We found no way to arrange the pictures in percentages within the container.
Thank you very much,
Marcel
|
|
Dean
|
May 6, 2015 at 2:35 am
Hi,
Not sure why thats happening but there’s a couple of easy CSS fixes.
1) This will allow resizing and keep the margins
.ee_grid_box img {
width: 100%;
height: auto;
}
.ee_grid_box a {
margin-right: 0;
margin-bottom: 10px;
float: left;
width: 14.667%;
margin: 0 1%;
}
2) Same as above but margin-less
.ee_grid_box img {
width: 100%;
height: auto;
}
.ee_grid_box a {
margin-right: 0;
margin-bottom: 10px;
float: left;
width: 16.667%;
}
That CSS can be added to your themes style.css, though in order to preserve the CSS through theme updates we recommend adding it to either: a child themes style.css, your themes CSS options if it has any, or a plugin such as My Custom CSS.
|
|
Marcel Wepfer
|
May 6, 2015 at 2:52 am
Hi Dean
Thank you very much … that works perfect on the welcome page. But now I have another Problem …
Here http://kino.sevenskills.ch/kontakt/team/ on the right side I would like to Show 6 Pictures in rows (2 Pictures next to each other). But now it Shows all 6 Pictures next to each other … what do i have to Change?
Kind regards,
Marcel
|
|
Lorenzo Orlando Caum
|
May 6, 2015 at 9:38 am
Hi Marcel,
Try this as a starting point and then adjust from there:
.page-id-1301 .ee_grid_box a {margin-right: 0;margin-bottom: 10px;float: left;width: 35.667%;margin: 25px 5%;}
It should appear similar to this:
http://cl.ly/image/2k0o2D3t3a1a
—
Lorenzo
|
|
Marcel Wepfer
|
May 7, 2015 at 12:52 am
Hi Dean, hi Lorenzo
Thank you so much for your assistance … it looks perfect (see here: http://kino.sevenskills.ch/kontakt/team/)
I just have one more questions … then I think we’re there ;-))
The page-id-1301 did solve the “problem” on the team-page, but we have the same on all other pages as well i.e. here http://kino.sevenskills.ch/verein-kino-orion/statuten/ or here http://kino.sevenskills.ch/kontakt/oeffnungszeiten/ or here http://kino.sevenskills.ch/newsletter/. Do I have to address each page seperately (via the respective page-id) or is there a solution that solves it at once?
Thanks again and best regards,
Marcel
|
|
Marcel Wepfer
|
May 7, 2015 at 2:48 am
I think I found it out. I have replaced page-id-1301 with .one-third and now it Looks perfect on all pages …
thanks again for your highly appreciated help
Marcel
|
|
Lorenzo Orlando Caum
|
May 7, 2015 at 12:06 pm
You are welcome! I’ll update this support post to resolved.
If you need help with anything else, just create a new support post here:
https://eventespresso.com/support/forums/
—
Lorenzo
|
