Change the Mobile CSS?

• 

  christaverner · Member · Dec 13, 2013 at 9:44 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am currently using the Expound theme on my WordPress site and its almost perfect. Is it possible to change the way it looks on a mobile device?

  It currently looks like this on my iPhone / iPad:
  http://christaverner.files.wordpress.com/2013/12/img_3907.png

  But I would like a thinner outer border and the text to go right to the edge like this:
  http://christaverner.files.wordpress.com/2013/12/img_3922.png

  Is this possible?

  Thanks in advance :)

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

• 

  christaverner · Member · Dec 13, 2013 at 9:48 pm

  • Copy link

  (trying to embed the photos)

  Currently looks like this:

  <img class=”alignnone size-medium wp-image-68″ alt=”IMG_3907″ src=”http://christaverner.files.wordpress.com/2013/12/img_3907.png?w=169″ width=”169″ height=”300″ /> <a

  But I would like it to look like this:
  <img class=”alignnone size-medium wp-image-68″ alt=”IMG_3922″ src=”http://christaverner.files.wordpress.com/2013/12/img_3922.png?w=169″ width=”169″ height=”300″ /> <a

• 

  thesacredpath · Member · Dec 15, 2013 at 4:32 pm

  • Copy link

  Hi there, let’s start with this. Since you are using a responsive width theme, we need to use @media rules. The below will affect the display on anything under 600px in width (which is where the last change is made to the layout in the original CSS). It widens the overall page area to give a narrower band of color at the left and right, and widens the content by decreasing the left and right padding for the content.

  @media (max-width: 600px) {
  #page {
      width: 95%;
  }
  .site-content article {
  padding-right: 15px;
  padding-left: 15px;
  }
  }

• 

  christaverner · Member · Dec 18, 2013 at 3:09 am

  • Copy link

  That worked great! Thanks!