Total noob with "layout" question – needing help!

• 

  rockislandclassof1968 · Member · Apr 28, 2017 at 5:47 pm

  • Copy link
  • Add topic to favorites

  On this page of my new site –

  Classmates

  I have placed 10 images, 5 per row. But when I view in browser I get row 1 with 5, row 2 with 1 and row 3 with 4!? If I “squish” my browser, I can force it to 2 rows of 5 – on computer only. On iPhone/Safari it stays at 5-1-4.

  I upgraded to Professional since I’m sure I’ll have to do something with CSS (with which I’ve never worked!).

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

• 

  thesacredpath · Member · Apr 29, 2017 at 5:30 am

  • Copy link

  Hi there, this is a bit of a strange one. The following will correct this issue, and if you add additional items to the gallery, it should keep it from happening on subsequent rows, unless you change the number of images per row in which case an adjustment would have to be made to code. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  .gallery-columns-5 .gallery-item:nth-child(5n+1) {
  	clear: left;
  }

  I’m going to check and see if a bug report has been done on this issue, and if not, I’ll file one.

• 

  rockislandclassof1968 · Member · Apr 29, 2017 at 2:51 pm

  • Copy link

  That did in fact fix it! Thank you.

  Now, same area, I need to reduce the size of the image caption font, I really don’t want it to word wrap or “smoosh” together at any time if at all possible.

  And when I view on iPhone, or reduce size of browser, the header ro of text abbreviations get all jumbles up too.

• 

  rockislandclassof1968 · Member · Apr 30, 2017 at 2:20 pm

  • Copy link

  Sacred – Any thoughts on last 2 issues?

• 

  otpidusprime · Member · May 2, 2017 at 7:46 am

  • Copy link

  Hi @rockislandclassof1968,

  Now, same area, I need to reduce the size of the image caption font, I really don’t want it to word wrap or “smoosh” together at any time if at all possible.

  I think I answered this here: https://en.forums.wordpress.com/topic/can-i-make-the-caption-font-smaller?replies=8#post-2933674, please check it out.

  If you don’t wanna visit that link, here’s what i answered there:
  There are 3 things you can do to solve this:
  1. You can force the text to not wrap on the second line and use the ellipsis “•••” for the overflowing text, like this:

  .wp-caption-text {
      white-space: nowrap;
      width: 100px;
      margin: 0 auto;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  2. You use font-size to reduce the fonts so that they are on the same line on small screen devices:

  @media only screen and (max-width: 960px) {
      .wp-caption-text {
          font-size: 12px;  /*reduce more if you like*/
      }
  }

  3. Combine options 1 and 2:

  @media only screen and (max-width: 960px) {
      .wp-caption-text {
          white-space: nowrap;
          font-size: 16px;  /*reduce more if you like*/
          width: 100px;
          margin: 0 auto;
          overflow: hidden;
          text-overflow: ellipsis;
      }
  }

   

  And when I view on iPhone, or reduce size of browser, the header ro of text abbreviations get all jumbles up too.

  They are jumbling up because the words are wrapping on small width devices. So to solve that reduce the font-size on small screen devices using this CSS:

  @media only screen and (max-width: 560px) {
      .style7 {
         font-size: 11px;
      }
  }

  Hope this helps 🙂

• 

  rockislandclassof1968 · Member · May 2, 2017 at 9:52 pm

  • Copy link

  I think I’m learning but I want to make sure I’m clear on this.

  To reduce “caption font” for better viewing in browser and small devices, use:
  
  @media only screen and (max-width: 960px) {
  .wp-caption-text {
  font-size: 12px; /*reduce more if you like*/
  }
  }

  To reduce the header row of text in browser and especialy on small devices, use:
  
  @media only screen and (max-width: 560px) {
  .style7 {
  font-size: 11px;
  }
  }

  If correct – and I need to use both, do I just copy paste each segment to the customize CSS panel where I added the code thesacredpath’s code to keep images in line?

• 

  rockislandclassof1968 · Member · May 6, 2017 at 5:08 pm

  • Copy link

  Can you guys “confirm” or “deny” my last post?

  I have 1 piece of code posted in the customize CSS editor to keep photos all in a 5 thumbnail row.

  Do I paste these 2 bits of code in there too – along with the existing piece?

• 

  otpidusprime · Member · May 9, 2017 at 8:07 am

  • Copy link

  @rockislandclassof1968

  I think I’m learning but I want to make sure I’m clear on this.

  To reduce “caption font” for better viewing in browser and small devices, use:
  
  @media only screen and (max-width: 960px) {
  .wp-caption-text {
  font-size: 12px; /*reduce more if you like*/
  }
  }

  To reduce the header row of text in browser and especialy on small devices, use:
  
  @media only screen and (max-width: 560px) {
  .style7 {
  font-size: 11px;
  }
  }

  If correct – and I need to use both, do I just copy paste each segment to the customize CSS panel where I added the code thesacredpath’s code to keep images in line?

  Paste it wherever you like, but pasting it at the end would be a great choice as they can be easily accessible.