- This topic has 3 replies, 2 voices, and was last updated 1 year ago by
Tom.
-
AuthorPosts
-
March 25, 2020 at 1:23 pm #1210046
Max
Hi there,
I am using the latest GP Premium and WordPress and have been testing generateblocks for a while.
So far it has been fun but I have hit two walls:1.) I wanted to create a horizontal line which is aligned left and not centered. Unfortunately that was not possible via css alone or by using simple alignment features. I would have to use a variety of settings (combine containers, padding and margin) in order to create a somewhat left-aligned line of a certain width. Unfortunately this creates more issues (e.g. responsiveness). Is there a way to make the horizontal line be left-alinged via css? I have already styled it a bit via css (the default line option seems to be a bit buggy) but cannot align it.
This is the code I used:.gb-container .gb-container-a237c3d8 .wp-block-separator { background-color: white; height: 2px !important; width: 200px !important; text-align: left !important; }
Edit: I got some different results when I used the left property:
position: relative; left: -260px;
Although in this case I would have to style it separately for mobile I think.
2.) I wanted to create some box shadow around the dispülayed image but could not find the correct selector. In the end I used the container of the image (which is normally rectangular in order to make it round and create box-shadow behind it. Is there a way to target the image directly? This is the code I used:
.gb-container-ac8ab1b8 .aligncenter { border-radius: 250px !important; border: 5px solid white; box-shadow: 0 0 9px 9px rgba(0,0,0,.16); -webkit-box-shadow: : 0 0 9px 9px rgba(0,0,0,.16); }
Thank you for your time and best regards
March 25, 2020 at 4:46 pm #1210185Tom
Lead DeveloperLead DeveloperHi there,
1. Try this:
.gb-container .gb-container-a237c3d8 .wp-block-separator { margin-left: 0; }
2. You should be able to do this:
.gb-container-ac8ab1b8 .aligncenter img
However, the CSS being applied by WP since you have it set to the “circle” style will prevent your CSS from working.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 27, 2020 at 8:13 am #1212087Max
Thank you – that solved the issue.
Stay healthy and best regards
March 27, 2020 at 9:24 am #1212199Tom
Lead DeveloperLead DeveloperThank you, you too!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.