Slideshow and Gallery size
-
Hi. I want to reduce the size of the on-screen display of the Slideshow and Gallery so that it does not take up so much space on the page. The Happiness Engineers helped to a certain extent and have then referred me to this link.
The blog I need help with is: (visible only to logged in users)
-
Hi there, yes, we can do this. The following would be the code for your Wharfedale Track page.
.page-id-86 .site-content .container { max-width: 800px; }You would need to add additional CSS selectors (the top line) for the other pages and use the unique CSS class set in the opening body tag for each page you want to make smaller. However, looking around your site, all pages seem to be a bit too wide for easy reading, such as your about page. Although it is more complex than this, in general, for easy readability, you want text content to be between 500 and 750 pixels in width, so I would suggest the following, which will narrow the content on all pages.
.site-content .container { max-width: 800px; }It was originally 1100px, and you can edit the 800px value as desired. See what you think and let me know.
-
Sorry, I meant to put that I am querying the Slideshow and Gallery as shown on the Machinery/Plant page.
For the Slideshow, you can see that the “Box” that the Slideshow sits in has a large black box around much larger than the landscape photos within. Is it possible to reduce the size of the black box to make it not as tall and more of a rectangle?
For the Gallery on the same page, I just want to reduce the overall size of the Gallery as it shows on the page. I do not want it to take up the full width of the page.
-
This is a tricky thing to do, but see what you think with the following. Add it below all other custom CSS.
.page-id-77 .site-content .container { max-width: 800px; } .page-id-77 .slideshow-window { padding-bottom: 35% !important; } body.page-id-77 div.slideshow-window * img { top: 75% !important; } -
Hmmm, not quite what I was after. When I look at the Slideshow on the edit page, the black box which is around the Slideshow of photos “fits” the Slideshow, but on the actual webpage there is a big black part of box above the scrolling landscape photos.
Also, there doesn’t appear to be any difference in the Gallery size at the bottom of the same page.
-
The editor is not a WYSIWYG editor, it is a rich-text editor, so what you see in there will not necessarily match what you see on the actual site.
On the slideshow, with this CSS (I cut the border width in half)
.page-id-77 .slideshow-window { border-width: 10px; padding-bottom: 35% !important; }this is what I see on your site: https://cldup.com/uUZKHRHcR0.png
Making the gallery narrower in width can’t really be done as the software calculates the image sizes based on the width of the content area. We could narrow the entire content area for that page and then the software would resize the images based on that new width for the content area. That will mean everything in the content area will get narrower, including the text. You can add this and see what you think.
.page-id-77 #primary { float: none; margin-left: auto; margin-right: auto; max-width: 800px; width: 100%; } -
Still doesn’t work. I understand that the editor is not WYSIWYG, so I save the changes and revert to the actual site and the Slideshow still shows large and with the big black box that looks odd.
And changing the size of the Gallery does not seem to be working either.
I have deleted all of this CSS from the site now and will just leave it as it is.
-
I just added the code I gave above directly into your site customizer and it worked for me. The Preview in the Customizer will not automatically update the display of the gallery. Add the code and then narrow and widen your browser window and the gallery will resize and display correctly.
- The topic ‘Slideshow and Gallery size’ is closed to new replies.
WordPress.com Forums 
