Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 15, 2014 at 11:05 pm #279160
    sdbroker

    Hello,

    I noticed that on media screens under 989px and I believe up to 768px there’s A LOT of empty space (padding or margin) to the left & right of the main content and sidebar. That would be fine on full width pages but on pages that use sidebar, it makes the sidebar unusable, especially when using forms that require a minimum width of at least 180px to 200px.

    This extra space between the USABLE grid does not exist on other media screen sizes in which the sidebar is usable, appearing to left or right on screen above 989px and on the bottom (if desired) on screens under 768px.

    Is there a fix to eliminate this excess padding or margin that occurs between 989px to 768px media screens?

    Here’s an example on Enfold’s own demo site which the issue can be seen by adjusting the screen size.
    Thank you,
    George

    June 16, 2014 at 6:09 am #279251
    Ismael

    Hi sdbroker!

    Thank you for the update.

    You can increase the width of the container but you have to consider smaller screens:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .container {
width: 800px;
}
}

    Default value is 682px. You can declare more media queries if you want to target specific screen sizes.

    Cheers!
    Ismael

    June 16, 2014 at 6:33 am #279258
    sdbroker

    Thank you very much Ismael for your help. I changed the container width to 760px and it works perfect for that media range!

    Best!
    George

    June 16, 2014 at 10:43 am #279333
    Ismael

    Hey!

    Glad it worked. If you have any questions, let us know.

    Regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Responsive Site Isuues’ is closed to new replies.