Support » Theme: Sugar and Spice » can I control the page margins of a single page?

  • Hi, my site is personal, http://www.emilynedelltuck.com. I have a long, long document here: http://emilynedelltuck.com/philosophy-of-librarianship/.

    The page margins were so narrow it was difficult to read such a long document, so I put the content all inside of a table to widen the margins. However, this breaks the responsiveness of the page. Can you please give me a way to widen the margins of the page contents? Or is there another container I can use that allows for better readability on a mobile device?

    Thank you for your help!

    Emily

Viewing 1 replies (of 1 total)
  • Yes, using a table is very bad for responsiveness. What you should do is put the content inside of a <div> instead, and set the width using CSS:

    
    <div class="seventy_percent">
    Blah, blah, blah ...
    </div>
    

    Assign the <div> a class name that is easy to remember; the class is how you will reference the container in your CSS.

    Then in your custom CSS option, add these rules:

    
    .seventy_percent {
        width: 70%;
    }
    
    @media only screen and (max-width: 767px) {
       .seventy_percent {
          width: 100%;
       }
    }
    

    The first rule will set the width of your custom <div> to 70%. The second rule is inside of a media query. What will happen is when the width of the screen is less than 768px (i.e., on a mobile device), then the width switches to 100% so you don’t end up with so much empty space on a cell phone.

    By the way, your site design is awesome looking, good color combinations and font styling. The only thing I would caution you on is using inline styles. For example, I don’t know if you are hard coding the style attributes in your paragraph tags like this:

    
    <p style="text-align: left;">
    <span style="color: #000000">
    

    You want to avoid using inline styles because it makes it difficult to override with CSS. What you should do is use your own CSS to apply your styles. Then in the future, if you want to change a particular style, you don’t need to hunt through all of your code and change it, you would just change the CSS rule that pertains to those elements.

Viewing 1 replies (of 1 total)
  • The topic ‘can I control the page margins of a single page?’ is closed to new replies.