SOLVED CSS for three (responsive) images
-
-
- Björn Hallier
- Sr. Rocketeer
- Posts: 108
- Thanks: 15
-
Hi,
I'm trying to put three images next to each other inside an article.
The images are larger than the g-blocks where they are put in.
I'm using the code below:
<div class="g-grid"> <div class="g-block center size-33-3"> <div class="g-content"> <figure><img src="http://placehold.it/550x413" alt="" /> <figcaption>Bildunterschrift</figcaption> </figure> </div> </div> <div class="g-block center size-33-3"> <div class="g-content"> <figure><img src="http://placehold.it/550x413" alt="" /> <figcaption>Bildunterschrift</figcaption> </figure> </div> </div> <div class="g-block center size-33-3"> <div class="g-content"> <figure><img src="http://placehold.it/550x413" alt="" /> <figcaption>Bildunterschrift</figcaption> </figure> </div> </div> </div>
Why isn't the content of the g-blocks responsive and the images get resized?
Where is my css mistake?
Thanks in advance
Björn Hallier - Last Edit: 9 years 5 months ago by Björn Hallier. Reason: Solved
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
If this is a site that is online (just installed, dev or live) could you please supply a link in the Public or SECURE part of your reply so we can better diagnose the issue?
It makes our suggestions more accurate if we see the actual coding of your site.
-
-
-
- Björn Hallier
- Sr. Rocketeer
- Posts: 108
- Thanks: 15
-
I've put it online:
test article
Isotope 1.0.1, Gantry 5.2.3
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
that looks like that evil firefox-only-bug with tables/display-table ...
try to add this to your custom scss-file
.g-content figure {table-layout:fixed; max-width: 100%; width: 100%}
Here is how to add a custom scss file:
docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet - Last Edit: 9 years 5 months ago by Henning.
-
The following users have thanked you: Björn Hallier
-
-
-
- Björn Hallier
- Sr. Rocketeer
- Posts: 108
- Thanks: 15
-
Now the images are resized, however the blocks floated to the right:
Testartikel
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
try this instead
.g-content figure { table-layout: fixed; max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; } -
The following users have thanked you: Björn Hallier
-
-
-
- Björn Hallier
- Sr. Rocketeer
- Posts: 108
- Thanks: 15
-
That was it! Thanks a lot!
However it's not a Firefox bug since MS Edge had the same problems! - Last Edit: 9 years 5 months ago by Björn Hallier.
-
Time to create page: 0.082 seconds