[Resolved] generate blocks: creating horizontal line and shadow

Home Forums Support generate blocks: creating horizontal line and shadow

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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

    #1210185
    Tom
    Lead Developer
    Lead Developer

    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.

    #1212087
    Max

    Thank you – that solved the issue.

    Stay healthy and best regards

    #1212199
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.