add a left marginand a border to the blockquote

  • Resolved eoik

    (@eoik)


    1 year, 9 months ago

    hi , I don’t understand the css of the blockquote tag and don’t find how to modifiy it : 

    blockquote {
    padding: 0;
    position: relative;
    margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
    }
    .wp-block-quote {
  padding-inline-start: 1em;
  margin: 0;
    margin-right: 0px;
    margin-left: 0px;
}

    I wanted to have a larger left-margin, but could not use the left-margin property, so in the end this is what I did: 

    blockquote.reves, blockquote .wp-block-quote .reves {
	border-left: solid 5px;
	padding-left: 2em !important;
	font-weight: normal !important;
	inset-inline-start: 2em;
	padding-inline-end: 4em;

}

    I hope it’s ok, because I don’t absolutely know what the css “-inline-” things are.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @eoik The block is already pulling the margin from somewhere else so you will need to override this. You can use the CSS code shown below:

    blockquote.wp-block-quote {
    margin-left: 60px !important;
}

    You can adjust 60px to your liking.

    Thread Starter eoik

    (@eoik)

    Hi @thelmachido , thank you!

    I should have mentioned it, but I had tried it. the margin-left property pushed the blockquote to the left, if 60 px, then it was 60 px of the left side of the screen. That is why I ended up using :

    inset-inline-start: 2em;

    because of the property of the wp-block-quote class

    padding-inline-start: 1em;

    I don’t exactly understand how it works, but it works.

    Oh it sounds like you wanted to adjust the space inside the BlockQuote, yes using padding would be the best way to do this. Thanks for following up, I am going to mark this as resolved for now.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘add a left marginand a border to the blockquote’ is closed to new replies.

Tags