How to align image left on small displays?

• 

  kridpics · Member · Oct 18, 2014 at 2:42 am

  • Copy link
  • Add topic to favorites

  I have a problem with the following page: http://www.kridconsulting.com/company

  While the layout is great on larger screens I do not manage to get the bottom two images aligned left on smaller displays e.g. iphone.

  I added the following using the css editor:

  @media only screen and (max-width: 629px) {
  .alignleft, .alignright {
  clear: both;
  float: none;
  display: block;
  }
  }

  @media only screen and (max-width: 320px) {
  .gallery-columns-3 .gallery-item {
  width: 100%;
  margin-bottom: 20px;
  }
  }

  and tried adding:

  @media only screen and (max-width: 629px) {
  img.wp-image-516 {
  float: left;
  }
  }

  (same for second image)

  But that does not work.

  Any help would be greatly appreciated as it is the last open item…

  Thanks in advance!!!

• 

  thesacredpath · Member · Oct 18, 2014 at 4:36 am

  • Copy link

  Hi @kridpics, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org Themes and Templates forum.

  For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

  The differences between WordPress.com and WordPress.org.

• 

  thesacredpath · Member · Oct 18, 2014 at 4:43 am

  • Copy link

  I did take a quick peek, and on the image of the man and chalkboard, there is a margin of 14px on the left of the image (since it is inserted as alignright. You can set the left margin on img.alignright to 0.