CSS for shortcodes

• 

  instituutjjolie · Member · Apr 18, 2017 at 7:50 am

  • Copy link
  • Add topic to favorites

  Hello

  I have a problem with my website, I have tiles on some of my pages with the use of shortcodes. But on some pages the images of those shortcodes look really out of place.

  I contacted the WordPress LiveChat and they told me to make a post here.
  Can someone help me out with a CSS code?

  Thanks in advance
  Quinten

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 18, 2017 at 8:18 am

  • Copy link

  Hi @instituutjjolie,
  Can you provide a link to the page, so that we can look at it as an example and provide you with an appropriate code?

  Thanks! :)

• 

  instituutjjolie · Member · Apr 18, 2017 at 8:23 am

  • Copy link

  Hi @otpidusprime

  This is one of the pages where I have this problem: https://instituutjjolie.com/portfolio/gelaatsverzorging/

• 

  otpidusprime · Member · Apr 18, 2017 at 8:28 am

  • Copy link

  There this CSS code:

  img.size-big, .wp-caption.caption-big {
      display: inline-block;
      float: none;
      margin-left: -145px;   // this one
      margin-bottom: 1.5556em;
      max-width: 1000px;
  }

  which is shifting the images to the left.

  So to solve this, add this CSS code:

  img.size-big {
      margin-left: 0px;
  }

  to the CSS Edtior.

  Let us know if it helps :)

• 

  instituutjjolie · Member · Apr 18, 2017 at 9:16 am

  • Copy link

  @otpidusprime That works perfectly, thank you!

  Is there also a way to change the font size of the shortcode text with CSS?

  Thanks again :)

• 

  instituutjjolie · Member · Apr 18, 2017 at 9:16 am

  • Copy link

  @otpidusprime That works perfectly, thank you!

  Is there also a way to change the font size of the shortcode text with CSS?

  Thanks again :)

• 

  otpidusprime · Member · Apr 18, 2017 at 9:21 am

  • Copy link

  Yeah there is,
  Use this CSS code to:
  1. To change the font-size of the portfolio title:

  .portfolio-entry-title {
      font-size: 1em;
  }

  2. To change the font-size of the portfolio author:

  .project-author {
      font-size: 0.9em;
  }

  Hope this helps :)

• 

  instituutjjolie · Member · Apr 18, 2017 at 9:25 am

  • Copy link

  Works just fine!
  Thank you for all the help :)

• 

  otpidusprime · Member · Apr 18, 2017 at 9:57 am

  • Copy link

  You’re welcome @instituutjjolie! :)