Creating borders

• 

  simonemobrien · Member · Oct 4, 2018 at 11:41 am

  • Copy link
  • Add topic to favorites

  Hi there, I would like to create borders around individual items on my homepage so it makes them easier to differentiate when you scroll on mobile devices.

  I.e. I looking at having “School”, “Workplace”, the blog previews, testimonials etc. in individual white boxes to separate them.

  Thanks.

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

• 

  wpx2 · Member · Oct 5, 2018 at 12:51 am

  • Copy link

  Hello @simoemobrien

  Are you referring to something like in this picture?

  

  Since you want those borders to show up only on the mobile version of your website, Add the following custom CSS code below to the CSS editor in your website’s Dashboard.

  @media only screen and (max-width:700px) {
      #featured-pages .small {
      border: 3px solid #fff;
      padding-top: 15px;
  }}

  To access the CSS editor, first launch your site customizer then click on the CSS tab to access the CSS editor.

  Let me know if this helps :)

• 

  simonemobrien · Member · Oct 14, 2018 at 4:44 am

  • Copy link

  Hi, yes it works! Thanks! Can I get the same thing going for the blog section too?

• 

  wpx2 · Member · Oct 15, 2018 at 12:48 am

  • Copy link

  Hello @simonemobrien

  Sure, here is the CSS code that will add white borders to the posts in the blog section on your website.

  @media only screen and (max-width:700px) {
  #home-posts .small {
      border: 3px solid #fff !important;
      padding-top: 15px;
  }}

  Let me know if it works for you and if you have any other customization you would like to apply on your website :)