Position of main content container

  • Resolved andreycheks

    (@andreycheks)


    9 years, 9 months ago

    Thank you for a fantastic theme. I realize that the author is on vacation for a while and I hope his time is restful.

    I’ve increased the width of my main content container as well as reduced the size of the secondary sidebar. I’ve added these two lines to custom CSS:

    #secondary {
width: 20%;
}
.container {
    width: 100%;
    position: relative;
    left: 5%;
}

    I added the lines about positioning because then it goes all the way to the left. However, this looks fantastic on a desktop and the responsiveness seems to do well, until it’s loaded on a mobile device and it indents too far on the left. I assume that this is because I told it to with my position code.

    Here’s my question, how can I set the position of the main content container without ruining the responsiveness and by still maintaining the integrity of the mobile theme?

    Here’s the website: https://edenbridgefoundation.org/
    (It’s still under construction, so please don’t judge me too much <grin>)

    Also, for the purposes of functionality, I removed the two lines about position for the time being.

    Thanks!

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

    (@silkalns)

    Hi,

    I am already back from vacation. ??

    You can use CSS @media queries to style your website based on screen resolution. Here is how you could you use the same code you provided earlier but apply it only of devices wider than 1024px (larger than iPad in landscape). 

    @media (min-width: 1024px) {
  #secondary {
    width: 20%;
  }
  .container {
    width: 100%;
    position: relative;
    left: 5%;
  }
}

    Let me know if this helps.

    Thread Starter andreycheks

    (@andreycheks)

    Works perfectly. Thank you. You also resolved another minor glitch that only showed up on the mobile version, so I must have been missing something small that was corrected in your coding.

    Hope the vacation went well.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Position of main content container’ is closed to new replies.