Need to realign my portfolio thumbnails on the mobile platform (Swell)

• 

  laurapalmerwp · Member · Feb 19, 2015 at 11:42 am

  • Copy link
  • Add topic to favorites

  Hi, my portfolio thumbnails seem to be aligned right on my iPhone. In fact, on the desktop platform, they are too – its just less noticeable. Anyway of realigning them?

  What I’d really like to do (on the desktop) is to align them left within the 800px wide area that all other content is contained within on this template. That would mean that they would have to be reduced in size – which is fine. I just don’t know if that would affect how they would look on the Home page.. Ideally though, I’d also like them aligned the same on the home page too (left aligned within 800px area) anyway!

  Regardless of how they look on the desktop, centred is fine on the mobile – just not aligned right. And if aligning the thumbnails within the 800px area on a desktop, as above, isn’t possible – then aligned centre would be ok too.

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

• 

  shawnajroberts · Member · Feb 19, 2015 at 5:21 pm

  • Copy link

  Hi there!

  Do you mean they’re right aligned on your homepage on a mobile device? Or on your portfolio page here:

  https://palmerowen.wordpress.com/showcase/

  If neither of those, can you give me a link to where you’re seeing this?

• 

  laurapalmerwp · Member · Feb 20, 2015 at 2:50 pm

  • Copy link

  They are right aligned both on the mobile and on desktop – for the page you have indicated.

• 

  shawnajroberts · Member · Feb 20, 2015 at 5:33 pm

  • Copy link

  Thanks! This is being caused by this piece of code:

  #posts-scroll div a {
  	left: 50px;
  }

  You can either wrap this inside a media query with a ‘min-width’ value so that this only affects desktop browser sizes. Or you can add a media query with a ‘max-width’ value that sets left: 0; for mobile screen sizes. You can read more about media queries here:

  http://en.support.wordpress.com/custom-design/custom-css-media-queries/

• 

  laurapalmerwp · Member · Feb 21, 2015 at 3:25 pm

  • Copy link

  I’ve taken a look at the page you referred to but don’t know CSS well enough to create the code required.

  Could send the CSS in order to left align with a 800px area on desktop and so it’s centred on a mobile? Not sure about iPad/other tablet sizing..?!

• 

  laurapalmerwp · Member · Feb 21, 2015 at 3:26 pm

  • Copy link

  ..Forgot to say thanks!

• 

  alexjgustafson · Member · Feb 22, 2015 at 4:34 pm

  • Copy link

  Like Shawna mentioned, you already have this bit of CSS on your site:

  #posts-scroll div a {
  	left: 50px;
  }

  To wrap this in a media query, you leave the code as it is, but you put the media query around it. For example:

  @media screen and (min-width:901px){
  #posts-scroll div a {
  	left: 50px;
  }
  }

  You can choose a variety of values for the min-widths like Shawn recommended, but I noticed you had other @media queries with 901px min-widths. With this new code, the CSS would only take affect on screens larger than 901pixels wide, and would not be used on phone screens.

• 

  laurapalmerwp · Member · Feb 23, 2015 at 2:51 pm

  • Copy link

  thanks