photos won't center

• 

  rainyd03 · Member · Sep 17, 2019 at 3:04 pm

  • Copy link
  • Add topic to favorites

  I’ve been using the Blask theme for a year now with no problems. This week, however, I went into a Portfolio page to add some images, centered them, looked great in Customizer, saved, but when I went to the site, the images added were not centered, and older images in that Portfolio—that were centered— were suddenly all over the place.

  I’ve deleted and re-added, tried various CSS code recommended on other forums, nothing worked. I’m now afraid to update any other Portfolios in the event the same thing happens, making my site look sloppy and poorly designed.

  This issue just started so I’m wondering if it has to do with some update.

  Any suggestions to remedy the situation would be much appreciated. Thanks!

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

• 

  khushbudesaiblog · Member · Sep 18, 2019 at 1:36 pm

  • Copy link

  Hi @rainyd03,

  Could you provide exact link of ypur portfolio page where things look messy?

• 

  rainyd03 · Member · Sep 18, 2019 at 2:44 pm

  • Copy link

  Hello & thanks for checking in on this:

  The page I’ve been having trouble with is here: The Press Room

  The orange framed photo at top is set to be centered; it is centered on my edit and Customizer pages. I ultimately removed it, but put it back in just now so you could see it.

  After trying a number of CSS suggestions, I found some remedy with a set of code (which I’ll paste below this note) that at least centered the little thumbnails mid-page, but did not center the main image at the top of the page. Unless you figure out a solution, I be removing that image again out of sheer frustration!

  Oddly, this just started the other day. That photo was there and fine prior; all my other portfolio pages do not seem to be having this issue.

  If there is any reason you think the code I input (below) is problematic, let me know; even though it didn’t solve the top photo problem, I do want to keep it since it solved the thumbnail problem

  Thanks. I appreciate your input.

  Lorraine

  /* =WordPress Core
  ————————————————————– */
  .alignnone {
  margin: 5px 20px 20px 0;
  }

  .aligncenter,
  div.aligncenter {
  display: block;
  margin: 5px auto;
  }

  .alignright {
  float: right;
  margin: 5px 0 20px 20px;
  }

  .alignleft {
  float: left;
  margin: 5px 20px 20px 0;
  }

  a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
  }

  a img.alignnone {
  margin: 5px 20px 20px 0;
  }

  a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
  }

  a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

  .wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
  }

  .wp-caption.alignnone {
  margin: 5px 20px 20px 0;
  }

  .wp-caption.alignleft {
  margin: 5px 20px 20px 0;
  }

  .wp-caption.alignright {
  margin: 5px 0 20px 20px;
  }

  .wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
  }

  .wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
  }

  /* Text meant only for screen readers. */
  .screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  }

  .screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: .875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
  }