reduce content width on full width page

Homepage › Community Forums › Epik Theme Support › reduce content width on full width page

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 21, 2016 at 6:01 am #17048
    giraffe
    Customer

      Hi
      Sorry, for the simple questions. On full width pages the text width is too wide to read comfortably on desktops and laptops. I’m trying to create narrower text.
      I’m doing

      .full-width-content .entry {
      padding: 48px 200px;
      }

      It does seem to reduce the width but can someone tell me if I’m taking the best approach?

      Second, I seem to get tangled up in the media queries. To restrict it to desktops and laptops I’ve tried wrapping it in:
      @media only screen and (min-width: 1024px) {}

      Doesn’t seem to work though and changed padding is still applied to iphone.
      Is this the way to go, or should I be doing something different?

      many thanks for your help

      martin

      January 21, 2016 at 8:45 am #17051
      Eric
      Customer

        Do you have a link to your site? I can take a look at your site and let you know the best way to do this.

        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

        January 29, 2016 at 9:24 am #17090
        giraffe
        Customer

          Hi Eric, Sorry for the delay in replying. This link should get you to the page where I’m having problems.
          http://martinlea.com/full-test

          many thanks for your help.

          January 29, 2016 at 11:00 pm #17093
          Eric
          Customer

            Are you just trying to shrink the content area or the entire site all together? If it’s just the Content area, then you could adjust the .full-width-content .content in your CSS like this –

            .full-width-content .content {
    float: none;
    margin: 0 auto;
    width: 80%;
}

            That removes the float, centers it, and decreases the width by 20%. If that’s what you want, you can decrease the width even more if you need to.

            I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

            January 30, 2016 at 7:37 am #17095
            giraffe
            Customer

              That’s great thanks. Just shrink the content area on full width pages, not the whole site.
              However I also want to create more white space between the edges of the full width content area and the text. I’ve tried adjusting the padding-left and padding-right for .entry which seems to do the job eg
              .full-width-content .entry{
              padding-left: 80px;
              padding-right: 80px;
              }

              but of course I don’t want to shrink the content area or add this padding for mobile devices. I’m puzzling over how to restrict the changes to desktops only?

              I’ve tried wrapping the above in
              @media only screen and (min-width: 1024px) {}

              but that doesn’t seem to work. How can i restrict these changes to affecting desktops and laptops please?

              many thanks for your help.

            • Author
              Posts
            Viewing 5 posts - 1 through 5 (of 5 total)
            • You must be logged in to reply to this topic.