Setting Maximum Width for Mobile/Tablet Views in Expound

• 

  2w2n · Member · May 16, 2016 at 6:53 pm

  • Copy link
  • Add topic to favorites

  Hi All,

  I’ve been playing with the margins on my site using the desktop view, and of course this has messed up the mobile and tablet views. Is there any way I can set a maximum width for mobile/tablet so changes to desktop view won’t affect the other views? The code I used is:

  .single #primary {
  width: 915px;
  margin-left: 50px;
  }

  .page #primary {
  width: 915px;
  margin-left: 50px;
  }

  .archive #primary {
  width: 915px;
  margin-left: 50px;
  }

  Thanks much,

  Kelly

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

• 

  thesacredpath · Member · May 17, 2016 at 4:11 am

  • Copy link

  Hi, with responsive designed themes, you typically can’t set a static width, such as pixels. You have to set a max-width and then set a width of 100% like I have below.

  .single #primary, .page #primary, .archive #primary {
      float: none;
      margin-left: auto;
      margin-right: auto;
      max-width: 915px;
      width: 100%;
  }

  The left margin value you had was also pushing things to the right and off the screen. What I’ve done is set the left and right margins above to “auto” which centers the content. Since the original design also had a “float: left;” declaration, I changed that to “float: none;” so that the auto margin settings would work and center the content.

  Since the other two rules you had were identical, what I’ve done is to combine the selectors so that there is one rule that styles all three identically. You can remove the three you have from your existing custom CSS and replace it with the above.

• 

  2w2n · Member · May 17, 2016 at 8:20 pm

  • Copy link

  Thanks so much! I was also playing around with the header and added my own title design. Same problem: only a couple of letters of the title show up in the mobile views. Is there any way to make the entire header area “float”?

• 

  thesacredpath · Member · May 17, 2016 at 10:10 pm

  • Copy link

  I think what you have now, with the title and tagline being standard text-based is the best solution.

  Right now, the header image is set to stay center aligned horizontally. It could be changed to stay aligned on the left, if your title/tagline was to the left on that image. What you would have to do would be to make sure the length of the title/tagline was no more than 300px in width so that it would show entirely on a smaller phone screen.

• 

  2w2n · Member · May 18, 2016 at 12:14 am

  • Copy link

  Right. Thanks again. Your help is always appreciated.

• 

  thesacredpath · Member · May 18, 2016 at 1:43 am

  • Copy link

  You are welcome.