Hermes Template – mosaic gallery on full scale

claudiosieber · Member · Mar 25, 2017 at 9:55 am
Copy link

Add topic to favorites
Is there any possibility or code to visualize the mosaic gallery on the full scale (within the page, without room on the left and right hand side)? see https://claudiosieberphotography.com/countries/thailand/sak-yant-thailands-bizarre-tattoo-traditions/

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 28, 2017 at 4:03 am
Copy link
Hi there, going full width is a bit difficult, but we can increase the size of it considerably. Add the following to your custom CSS and then in the Media Width field below the CSS entry area, enter 1800.
```
.page-id-15578 #main {
	width: 100%;
	max-width: 100%;
}
.page-id-15578 #main .entry-content .gallery-row {
	width: 100% !important;
}
.page-id-15578 #content .container {
	width: 1800px;
}
```
thesacredpath · Member · Mar 28, 2017 at 4:04 am
Copy link
Oh, I forgot to mention this change will not be reflected in the Preview in the Customizer. Save & Publish and then visit your site to see the change.

I’ve specifically targeted only that page you referenced.
claudiosieber · Member · Apr 2, 2017 at 4:13 am
Copy link
Dear Happiness Engineer

Thanks for your effort. My sincere apologies for not replying back earlier, where I am right now, the internet is quite slow.

Your code works, but there are still some issues.

1) Media Widht 1800px does easily fuzz without the code (that’s what I had before). If adding the code with 1800px, the title of the page (in this case Yak Sant – Thailand’s bizzare…) will not be centered and disapperas at the right side of the window. And also the images are to big, a viewer would have to scroll to the left and right. So I tried with 1300px which (at least on my MacBook Air) does look good. Still if I minimize the window the photos still remain in their size and the title fades at the right side of the window. As for the title image, it works and it minimizes with the window. Hence, on mobile devices, this doesn’t make sense because also here the photos remain in their size and it’s hard for a visitor to have an overview (without adding this CSS for the mobile theme).

2) In case you’ll find a way, could we code all the pages the same way (not just Sak Yant)?

Thanks again for your patience.
Claudio
thesacredpath · Member · Apr 3, 2017 at 7:29 pm
Copy link
Claudio, I am so sorry. I messed up the last CSS rule. Use this instead and all should be good.
```
.page-id-15578 #main {
	width: 100%;
	max-width: 100%;
}
.page-id-15578 #main .entry-content .gallery-row {
	width: 100% !important;
}
.page-id-15578 #content .container {
	max-width: 1800px;
	width: 100%;
}
```
You can adjust that 1800px value as desired, and then just match the Media Width to it.
claudiosieber · Member · Apr 4, 2017 at 12:11 am
Copy link
Perfect! It looks great now. Could we code all the pages the same way (not just Sak Yant)? In case there is a solution, I’ve to check the impact on my overview pages such as https://claudiosieberphotography.com/countries/
thesacredpath · Member · Apr 4, 2017 at 7:07 am
Copy link
Hmmm, that would get complex, because you don’t necessarily want pages such as Malaysia to be full width, because it only has two images. You can replace what I gave previously with the following and the visit a bunch of your pages to see what things look like.
```
.page-child #main {
	width:100%;
	max-width:100%;
}
.page-child #main .entry-content .gallery-row {
	width:100% !important;
}
.page-child #content .container {
	max-width:1800px;
	width:100%;
}
```
claudiosieber · Member · Apr 4, 2017 at 7:33 am
Copy link
You just nailed it with this code. Amazing!

There will be usually more than one or two images with URL-links, so that’s no problem. Now my last question, is there a way to center the bulk images? As for now it sticks to the left and leaves space on the right depending on the screen size… I did something similar on my other page travelbuddy.ch – Guessing it would just work if I code each page seperately with the following:

<div class=”row”>
<div class=”col-lg-4 col-md-4 col-sm-4″>

Example: https://travelbuddy.ch/bildgalerien/usa/
thesacredpath · Member · Apr 4, 2017 at 9:19 pm
Copy link
Hi, you can give that a try and see how things go with the HTML code you have referenced. Let me know how things go with that.
claudiosieber · Member · Apr 5, 2017 at 2:42 am
Copy link
Okay, I’ll try it out. But this is going to take some time. We can close the topic. I’m happy. Thanks again
thesacredpath · Member · Apr 5, 2017 at 8:47 pm
Copy link
You are welcome. If you run into issues, let me know. You can post back into this thread and it will automatically show up in my list.

No items found.