How to: First thumbnail in column starting only at 40% browser height
-
I’d like the first thumbnail image to only begin at 40% of the vertical height. That is, the whole column with thumb images, each with text underneath, should start at some distance from the top of the page.
(see screenshot of design-dummy)
I do not want to target a specific image as my client will update this thumbnail column on his own and I do not want him to have to attribute classes or delete attributions manually. So, there should be a more general solution targeting the first image in this column or to define a padding-top (?) for the whole column.I tried to target this column or the first image in this column, but it seems that the following images then have the same distance to the preceding image. I am stuck.
Maybe there is some help? Thank you very much. -
Dear @LN
I hope i understand your problem and please correct me if i am wrong :)
The main content should start at 40% of the page's height, however because you want your client to have freedom to change picture we cannot target any one image specifically.
Here in the picture above i have targeted to whole "grid" and increased its "padding-top" from 1% to 40% using "Custom CSS & HTML"
Does this suit your needs or is it too simple a solution?
Your client can still change the images and this will continue to use the 40%
I hope this sets you in the right direction!
https://www.khanacademy.org/computing/computer-programming/html-css
These are two links that can introduce you to the basics of CSS if you having difficulty
As always thank you heaps for using Lay theme and having Patience with the Forum
Best wishes
Sincerely
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it