There are not enough pictures to make a fourth column. It will put a minimum of two on each column (when space allows).
Another tip with columns.
Using the shorthand: columns: 4 200px; (adjust width to suit) you can do away with all the media queries. The 4 is the maximum number of columns, the 200px is the minimum width. When the width reaches the minimum the column count is automatically reduced by one.
What is the full URL that would allow us to see the image?
Why have you added the !important modifier to the “img” properties
You have not given us enough code to know how the code renders. We request a URL to your site or a “working page” that demonstrates the issue per our posting guidelines.
Please help us help you by following our posting guidelines.
Forum POSTING Guidelines (Posting Basics): (Help us help you!)
Please note that because public access is locked right now you will need credentials to view it:
User: admin, Pass: adminadmin123. This public access restriction also causes, sometimes, the pages to load without any styling. I don’t know why. If this happens you will have to visit the homepage at https://siniparksi.gr/ and then navigate to “Downloads”, it is in the drop down menu at top right corner of the page.
Now, you will see the Downloads page has 4 sets of images. They are all built with the exact same way: There is a section id=“photos-grid” opening, then the links.
However, only 2nd set displays correctly. The 1st has one image moved lower AND wrong number of columns. The 3rd set has one image moved lower, but correct columns. The 2nd is OK. And the 4th might be ok, i’m not sure yet because it has only one image – although i guess it should be on the left.
@ronpat, the !important as you might already know is because the website is a complete mess and if i don’t use it the images inherit properties from dirrerent parts of the stylesheet. @SamA74, no, the “eBooks” is a simple h2 just before the section.
You are utilizing HTML columns (calling the section “#photos-grid” is misleading").
You have 5 items within that section that populate the left column from top to bottom then move to the next column to the right, etc, and thus only populate three columns. 2+2+1=5. You would need 7 or 8 images to populate 4 columns.
Delete one of the 5 images and the remainder will populate 4 columns as wished.
I do understand that all of your images are not the same height. You will likely have to reconsider how the pages are coded to best present the images.
I would think that flex would be a better solution here. Something that populates a row at at time rather than columns.
In your last post we showed you how to to use the validator to clean up errors and warnings in your code. I can understand that you probably didn’t look forward to hearing someone remind you that you need to validate the code on this page, too. (43 errors showing, most seem to be the same as we saw before.) You should take it upon yourself to benefit from the information that you are given and validate ALL of your code before asking for more help with pages that have the same errors that have yet to be corrected. Otherwise we are wasting our breath trying to be helpful.
Do not use paragraph tags around the anchors with images. The links are not paragraphs and they do not need the vertical margins. In this page, the margins are pushing that first image down below the text in the h2 tag.
I have tried to fix all these errors, but i can’t. I don’t know how to access them.
Someone suggested the i edit the plugins’ code. However there are still problems with that: First, i can see mostly php code, which i dread to touch. Secondly, whenever a plugin is updated – and they do that a lot --, any changes i made are reversed.
I will try to check if the margins are causing the issue now. Thank you, ronpat.
Which is exactly why I emphasized making your changes in the “local” or “child” stylesheet to override the code in the master files. One should never make changes in the master “theme” stylesheets. AND the local stylesheet should be the last stylesheet in the list of stylesheets so your changes always override any/all of the theme stylesheets.
On this page, this margin, applied by the “p” tag, is affecting that first image. If you delete this margin the image no longer drops down, but all other paragraph margins are lost, too. So the “fix” is to NOT use paragraph tags around the anchors.
I didn’t actually use a “p” tag on my own. But i did hit enter in the editot, between the “a” lines, just to make it easier for me to read and/or append things. But WP puts a “p” tag in places where i just see empty lines. So i just had to clean up those spaces.
As for the other thing… I believe that either i am not experienced enough to understand and implement what you’re saying, or that WP works differently than you maybe expect. The main stylesheet, called “style.css” is the one i can access and make changes. There is also a responsive.css which is basically mobile-friendly copies. I cannot decide the order these stylesheets load, because i cannot access the complete “head” section of each page. Every plugin creates their own html, css and js code and it is a complete mess. For example, the square logo on the left column is put there by a plugin, which creates a bunch of css that might affect other sections of the site. Forms are plugins, the menu is a plugin, the load-on-scroll is a plugin ,etc. I can see in Firefox inspector the code of any item, but i cannot necessarily find it on my dashboard and make changes to it.
It’s very probable that Wordpress works differently than I think it does I am not a Wordpress developer/coder. Perhaps @WebMachine or another Wordpresser will be able to give you (or both of us) some help undertstanding how the stylesheets are arranged.
Did you understand why 5 items do not fill 4 columns?
If you understand the HTML/CSS concept then I can go ahead and more this topic to the CMS/Wordpress category where it should receive better attention faster.
Flex box makes images stick together with no gaps between. Basically i want zero space to the left and right, and 5px space between the images – except for the smallest screen where only one column would show up.
I try using margin: 0 -5px for the flex container and padding: 0 5px for the items, which solves the problem, but then flexbox does not fill up all the space.
I am not a Wordpress developer/coder. Perhaps