Centering gallery on page
-
Hello everyone!
I wanted to know if it’s possible to ‘justify’ or align to center a gallery like the one in the reference page. You can notice that the gallery has a much narrow margin on the left compared to the right. Is it possible to modify this, with custom CSS or other method?
Thanks!
PS: ‘Number of Gallery Columns’ is automatic, and ‘Image Size’ is set to default.
The page I need help with: [log in to see the link]
-
Hi @lineagatuna and thanks for contacting us! π
This is coming from your theme’s page templates. You have a left content area (for your gallery) and a right sidebar for any widgets you may want to use.
Take a look at this screenshot: http://cloud.supportally.com/2i311J421K44
Your theme places a width of 680px for the left content. You can certainly use custom CSS to change that but that will mean you won’t be able to use the sidebar.
If you want to make this fullwidth and not use the sidebar, I can help you with that custom CSS. I can even target this page only for you in the CSS so it won’t affect other pages. But if you don’t want to use the sidebar for your site at all, just use this CSS. If you go to Appearance >> Customize >> Additional CSS you can copy/paste either CSS that works for you under the comments and then click save and publish to save the changes.
Targeting this page only CSS:
body.page-id-68 .sidebar { display: none; } body.page-id-68 .single_left { width: 100%; }To target all pages, just use this CSS:
.sidebar { display: none; } .single_left { width: 100%; }Please let me know if I can help with anything else! π
Hi akyusa01!
Thank you very much for your help. Unfortunately, the code you gave me had no effectβI tried to use both the general snippet and the post-specific one. The strange this is that when I added the post-specific code (and only that one), it actually did change its appearance, but this was probably because it adapted to a smaller screen area and not my actual screen resolution (due to the space taken by the left bar for the custom CSS).
Anyhow, as you might have guessed, I have no interest for sidebars in my page so if you can think of another way to conjure a full width code, I would appreciate it so much.
Thank you!
Hmmm, I went to change the parameter “width” to 100% instead of 930px directly into the style.css file, and that did the trick. I wonder if this is good practice though?
Oh! And while we’re at it, another short question: if I have 2 or more galleries inside a single page, how can I make it so there is no space/margin between them?
Thanks again, hope this isn’t so messy to answer.
Hey @lineagatuna π
I would never recommend changing anything in theme files and the reason I say that is if the theme author puts out an update to the theme (and you update) you’ll lose any edits you’ve made, including any styles changes.
You can either create a child theme for your theme to make edits (such as this) or you can just use the WordPress customizer if you’re only changing CSS. π Unless the theme is not coded correctly to bring in that customizer CSS would be the only thing I could think of why it wouldn’t work. But maybe we could try !important to over write the style.css
.sidebar { display: none !important; } .single_left { width: 100% !important; }As for your 2nd question, that would depend on the gallery layout you are using. If you are using an Automatic gallery, just set this to 0:
http://cloud.supportally.com/1G2s1O2X0u29
Or if you are using a column count, just be sure to set the margins to 0:
http://cloud.supportally.com/21050R0W1I3X
If you don’t see those options, that would mean you are running the free version so you would have to use custom CSS to remove any spacing. Are you running Envira Lite or do you have a licensed version?
Hello again akyusa01! Sorry for my late reply.
In regards to modifying a theme internally I guess I’m too late now, but fortunately it’s just superficial changes that I made, and they’re all commented. Also, this theme was inherited and custom-made by another developer, so it probably won’t be updated. I suppose when it grows too old I will just have to look for another, right?
Anyhow, the new CSS snippets you gave me still aren’t having an effect, so the theme must be poorly coded to not allow such customizations. Can you think of any other snippets or ideas on how I can solve this? Or should I just stick to my theme file modifications?
And about your last question: yes, I’m using Envira Lite :/
Are there any CSS codes out there to modify margins/padding/gutter?Thanks once again, and you have taught me a lot with your replies!
CheersNo worries π I’m happy I could help. Well as long as you know where you are with the CSS then that’s ok π Just be mindful of any theme updates so you can put back the CSS if you decide to update the theme π
As for the CSS to adjust the margins, if you are using a column layout, then you would just edit the gallery, click on the Config tab.
Changing the margins for an Automatic gallery isn’t quite that simple as it’s absolute positioned with inline CSS via javascript. So CSS really doesn’t have any effect for this.
Does that help?
Hi akyusa01,
Yes, you have helped me a lot. It’s been an eye-opener for me in many respects, as I’m just starting with WP developing, though I’ve had some previous experience scripting js and java. Always from a dilettante approach though, haha.
Many thanks again.
Have a nice week!You have a wonderful week as well! π And we’re always here to help!
For some good WordPress reads though, I would highly recommend following our friends at WPBeginner, their articles are always very helpful to anyone just starting out with WordPress or even just needing a refresher! π
The topic ‘Centering gallery on page’ is closed to new replies.