CSS on mobile devices

• 

  thesacredpath · Member · Mar 21, 2014 at 6:07 pm

  • Copy link

  The following media query sets the .post-thumbnails at a maximum width of 250px at 1025px and above.

  @media screen and (min-width: 1025px) {
      .home .post-thumbnail {
          max-width: 250px;
      }
  }

  The problem is right now, you have other CSS that is conflicting with the above. I think my suggestion is to copy all of your existing CSS out and into a plain text file for safe keeping and reference, and then add what I have above and test to see how that works on desktop, tablet and phone. It works nicely when I apply it to the demo site here using the Firefox web inspector.

• 

  usinarevista · Member · Mar 21, 2014 at 7:35 pm

  • Copy link

  Yeah that worked on my iPad, thanks hehe

  Is there anything we can do about the sidebar? Timethief mentioned that it automatically goes to the bottom on mobiles, I’m not sure if that’s also the case with tablets…

• 

  thesacredpath · Member · Mar 24, 2014 at 5:41 pm

  • Copy link

  In the original design, the sidebar moves below the content at 768px, which is the iPad Portrait screen width. Right now with your custom CSS, you have your content set at 75% width and that is remaining in effect at narrower screen sizes. Find #secondary.widget-area and #primary.site-content in your custom CSS and replace those two rules with the following:

  @media screen and (min-width: 769px) {
  #secondary.widget-area{
  	width:20%
  }
  
  #primary.site-content{
  	width:75%
  }
  }

  This takes the sidebar full width at 768px and below and takes the content to full width also.

  You also have an issue at around 400px in width where your offset post entries start to be cut off on the right side. You can clean up your custom CSS for the

  Replace the following

  .home #post-1288 .entry-content{
  	padding-left:200px
  }
  
  .home #post-1288 .entry-header{
  	padding-left:200px
  }

  with this:

  @media screen and (min-width: 400px) {
  .home #post-1288{
  	padding-left:200px
  }
  }

  You will need to do that for each of the posts you have moved to the right. At 400px and narrower, the post title and content will move back to the left.

  Give the above a try and see what you think.

• 

  usinarevista · Member · Mar 31, 2014 at 11:09 pm

  • Copy link

  Sorry for the late reply. That worked alright, there’s just a small bug. The older posts button in the homepage is not working on iPads… How can I fix it? Thanks

• 

  designsimply · Member · Apr 3, 2014 at 2:55 am

  • Copy link

  Can you try this to fix the problem with the “Posts mais antigos” button?

  #secondary {
  	clear: both;
  }

• 

  usinarevista · Member · Apr 5, 2014 at 12:05 am

  • Copy link

  Oh, that didn’t work. It messes up the desktop website. I tried `.home #content .paging-navigation {
  padding: 2.5em 0 2.5em 2.5em;
  }

  @media only screen and (min-width 680px) and (max-width 920px) {
  #secondary {
  clear: both;
  }
  }
  

  to no avail… :(

• 

  designsimply · Member · Apr 5, 2014 at 3:45 pm

  • Copy link

  I think you’re on the right track!

  In your @media rule you posted, there’s a mistake. There needs to be a “:” after min-width and max-width. Also, I think you only need the clear rule for screens that are 769px and smaller—because that’s the break point where the sidebar moves to the bottom of the design. Try changing the media query to this instead: “@media only screen and (max-width: 769px)”

• 

  usinarevista · Member · Apr 5, 2014 at 9:55 pm

  • Copy link

  Perfect!! That worked alright :-) I think we can finally close the topic heh Thanks for all your help

• 

  designsimply · Member · Apr 6, 2014 at 11:28 am

  • Copy link

  Awesome! Your site looks terrific! :)