How can I remove the grey border from around images/blog post pages in DUET theme please?

• 

  drdanni · Member · May 3, 2015 at 1:43 am

  • Copy link
  • Add topic to favorites

  I would like to remove the default grey border from around the images/blog posts in Duet theme. http://www.thecountryphiles.com Thank you, Danielle

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

• 

  thatrobyn · Member · May 3, 2015 at 4:29 pm

  • Copy link

  Hey Danielle!

  I’m happy to help you with this, but I’m not quite sure which border you mean. Could you look at the image below and let me know which border I should be addressing?

  https://cloudup.com/cOar0aNVMFU

  Or, if there is a different border I should be looking at, please take a screenshot, so I can better understand the issue. You can simply upload the screenshot to your Media Library, like any other image, and I’ll be able to access it from there.

  The page at the following link has some helpful tips for taking screenshots:

  Take a Screenshot

  Just let me know when there’s something I should look at.

  Many thanks!

• 

  drdanni · Member · May 3, 2015 at 9:59 pm

  • Copy link

  Hi Robyn {Happiness Engineer},
  Thank you for responding so promptly.
  Your screen shot is helpful: I am referring to the thicker grey border that acts like a box around the whole post.
  So, it’s the border where your red arrow points to the right/horizontally.
  Kind regards + thanks, Danielle

• 

  thatrobyn · Member · May 4, 2015 at 4:52 am

  • Copy link

  Hey there!

  Thanks so much for your response, and the further explanation!

  Since you have the Premium upgrade, you can adjust your theme’s CSS to hide that border.

  If you’d like to give this a try, go to your customizer by clicking the link below:
  https://thecountryphiles.wordpress.com/wp-admin/customize.php?

  Then, click CSS in your menu. In the CSS Revisions box, please paste the following underneath all existing text:

  #container {
  box-shadow: none;
  border: 0px;
  border-color: #fff
  margin: 2%;
  max-width: 880px;
  padding: 3.125% 6.25%;
  }

  Then Save your changes. That should do the trick!

  For more detailed instruction on how you can make CSS adjustments on your own, take a look at these two links:

  An Intro to CSS, or How to Make Things Look Like You Like

  
  https://dailypost.wordpress.com/2013/07/25/css-selectors/

  Thanks so much! Let me know if you have any other questions :)

• 

  drdanni · Member · May 4, 2015 at 5:58 am

  • Copy link

  Perfect! Robyn!
  It worked a treat.
  Thank you.
  If I chose to remove the grey line that your red arrow points up to, is there CSS code for that too.

  Or, alternatively, is there CSS code to make the width of those grey lines match the container width of the images eg. 600px or 800px etc.

  Kindest regards and huge thanks,
  Danielle

• 

  drdanni · Member · May 4, 2015 at 12:07 pm

  • Copy link

  Hello,
  I would like some CSS help please to make the body text width in line with the image width, set at max-width 600px. You can see an example of the format error on this page: http://thecountryphiles.com/2015/04/10/storyboard-wonderful-wanderlust-family/
  The body copy is wider than the images, even though the container is set at max-width 600px. Thank you, Danielle

• 

  thatrobyn · Member · May 4, 2015 at 4:47 pm

  • Copy link

  Hi Danielle!

  To remove the horizontal line, you can add this code to your CSS revisions box:

  .post-title {
  border-bottom: 0px;
  }

  The body copy is wider than the images, even though the container is set at max-width 600px.

  Because Duet is a Premium Theme, you do have access to your theme’s developers’ forum. As you’re wanting to adjust the layout of the theme with this last request, I’m going to give you the specialized Duet Forum link where you can pose your question:
  https://premium-themes.forums.wordpress.com/forum/duet

  I hope this helps! If you have any other concerns, drop me a note. Thanks much!