Issues with responsiveness

  • Resolved Ashutosh

    (@ashubetta)


    10 years, 4 months ago

    The theme has some formatting issues when the screen width is between 800 and 1000 px (approx.). The sidebar gets bumped down and the content area doesn’t change its width, thereby leaving a wide gap towards the right. Here’s a screenshot and an animation.

    I was able to get a temporary fix by changing the line

    @media all and (max-width:800px) {

    to

    @media all and (max-width:1000px) {

    in responsive.css. However, a 1000px stretched out single column looks very ugly.

    Ron’s other theme, Asteroid, doesn’t have this issue (the content area keeps shrinking and the sidebar stays put until the screen width reaches 800px). Is there any way to make Frontier resize in a similar manner?

    Thanks.

    Here’s my blog.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author ronangelo

    (@ronangelo)

    10 years, 4 months ago

    Asteroid Theme only has two columns, a content area and a sidebar area. This makes it much easier to make the layout adapt to various screen sizes.

    Frontier Theme on the other hand has many possible layout configurations to choose from: one, two, three column layouts and page templates that follow their own column layouts. In addition to this, the columns have widths that can be set by the user. So there are a lot more variables to consider.

    Anyway, since your chosen layout is composed of just two columns, you can add this code on Frontier Options -> CSS
    This should make the columns behave similar to Asteroid Theme.

    #content, .sidebar {
    display: table-cell;
    float: none !important;
    vertical-align: top;
}

    Thread Starter Ashutosh

    (@ashubetta)

    10 years, 4 months ago

    It worked! Thanks a ton, Ron. 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Issues with responsiveness’ is closed to new replies.