generate blocks: creating horizontal line and shadow

[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

[Tom]

Hi 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-development

[Max]

Thank you – that solved the issue.

Stay healthy and best regards

[Tom]

Thank you, you too!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts