Lessening the space between content and the border in my theme

  • Unknown's avatar
    unscriptedllc · Member ·

    I am using this theme https://motifdemo.wordpress.com/blog/ and I want to lessen the amount of space around the edges in the background. Is there a way to use this theme but expand it to fill more space on the screen? (It looks great on small screens, phones, etc. but if you have a large computer monitor you see as much blank space around the edges as you do the intended theme in the center.)

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

  • Unknown's avatar
    jessestu · Member ·

    Hi @

    You can do this by adding this custom CSS when you apply the theme and have a Personal or Business plan. Just make the values of 1140px and 975px bigger:

    @media screen and (min-width: 1200px) {
	.site {
    	max-width: 1140px;
    .content-area {
        width: 975px;
 }

    Having said that, though, having a paragraph of text spread across a wide screen can become difficult to read, from a user experience perspective. I’d advise caution as you consider this. Read more about the pitfalls from Smashing Magazine’s research:

    https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

    Happy blogging!
    Jesse

  • Unknown's avatar
    unscriptedllc · Member ·

    Thanks Jesse! Is there a way to lessen the space without getting rid of it completely? I definitely don’t want to make it hard to read, but I don’t want more blank screen than actual template either. Would you recommend changing the theme rather than applying this “fix?”

  • Unknown's avatar
    jessestu · Member ·

    It’s up to you what you’d like to do. I didn’t change the values above, so test out a bigger size yourself. For instance, how does the following look to you? All I changed was the size values in the code I sent earlier:

    @media screen and (min-width: 1200px) {
	.site {
    	max-width: 1340px;
  }
    .content-area {
        width: 925px;
 }
}

    Just a note, too: my code breaks the nice centering of the footer blocks. If you like this setup, it might take a bit more advanced code. Also, my previous code was all messed up. Use this one to actually see it work.

    What do you think of that wider look?

    At the end of the day, it might be easier to test out other themes and see how wide they go if this is important to you.

    I don’t know about all the WordPress.com theme options. This may exist. There are designs around the web that will fill any width of monitor with blocks of images and text that look like Pinterest, but those tend to downplay text and promote images.

    Best,
    Jesse

  • Unknown's avatar
    unscriptedllc · Member ·

    Jesse,

    Thank you very much. I will play with the size values and see if that works before changing the theme all together. I really appreciate the help.

    Charissa

  • Unknown's avatar
    jessestu · Member ·

    Also, I’m trying to hack this for testing purposes and missing details. If you wanted to use the code above for your actual site, it needs refinement, including that the min-width size should not be smaller than the .site’s max-width.

  • Unknown's avatar
    thesacredpath · Member ·

    @unscriptedllc, for the max width in the suggested media query, you can also try a percentage, such as 80%.

    The one thing to keep in mind that as line length on text gets longer, it becomes less readable and the eye has a hard time moving accurately from one line to the next. The golden rule is 66 characters per line maximum including spaces and punctuation.

  • The topic ‘Lessening the space between content and the border in my theme’ is closed to new replies.