0
Welcome Guest! Login
0 items Join Now

SOLVED Need to keep middle of template from shrinking as browser window narrows #2

Last Post
Search Topic

  • SOLVED Need to keep middle of template from shrinking as browser window narrows #2

    Posted 8 years 10 months ago
    • Damir was very helpful with my last problem How to keep 3 images in line, which we solved. Adjusting breakpoints in the Styles page worked for me.

      At this time, my template appears to be fully responsive as the browser window narrows. (I'm using Joomla 3.51, Gantry 5, and customizing the Hydrogen template at Fraudstoppers.com.) I have not yet done anything about a mobile menu, but that will come later.

      Now, I need to proceed with "Need to keep middle of template from shrinking as browser window narrows."
      Essentially, I'm using only the middle 68% of the page, and have put 16% borders on each side. The reason I use only the middle 68% of the page is because my animation and images cover only 68% of the page. I cannot stretch the animation wider without breaking it. So, the template looks more attractive when I keep my content in the middle 68% of the page.

      Instead of having the whole page shrink proportionately as the browser window narrows, it would be nice to keep the middle 68% of the page at full size and have the 16% borders disappear off screen as the browser window narrows. Once the borders disappear off screen, then I would like the middle section to resume shrinking proportionately.

      Efforts so far:

      Rockettheme Responsive Support Classes
      I tried using Rockettheme Responsive Support Classes . They worked well, but achieved a different effect. I could make my border images disappear, but the web page was still 100% wide and the middle 68% continued to shrink proportionately at all screen sizes.

      Kraken Fixed Side
      The Kraken template has a fixed left side, 192px wide, which does not narrow as the rest of the template narrows proportionately. I wonder if that technique could be adapted to keep my middle section from narrowing until the side borders disappear.

      Side Bar Sections
      I wonder if I could achieve the desired effect by creating side bar sections. So far, I have not added any sections to the Hydrogen theme.

      Thank you for any suggestions.

      Later Edit
      I had an idea for a work-around. I'll give it a try and post again.
    • Last Edit: 8 years 10 months ago by Pinto Buck.
    #1302617

  • Re: SOLVED Need to keep middle of template from shrinking as browser window narrows #2

    Posted 8 years 10 months ago
    • Pinto Buck wrote:
      Essentially, I'm using only the middle 68% of the page, and have put 16% borders on each side. The reason I use only the middle 68% of the page is because my animation and images cover only 68% of the page. I cannot stretch the animation wider without breaking it. So, the template looks more attractive when I keep my content in the middle 68% of the page.

      Instead of having the whole page shrink proportionately as the browser window narrows, it would be nice to keep the middle 68% of the page at full size and have the 16% borders disappear off screen as the browser window narrows. Once the borders disappear off screen, then I would like the middle section to resume shrinking proportionately...

      Later Edit
      I had an idea for a work-around. I'll give it a try and post again.

      My Work Around
      My animation would break when I streched it wider to cover more of the page. However, I found a way to enlarge the animation proportionately, keeping the same aspect ratio, without breaking the animation. That way, I could cover the full page width with my header animation and adjacent images. The drawback was that it increased the height of my header an undesirable amount. I got around that by redesigning my header and taking out some other decorative features, which allowed me to reduce the total height of the header. Now, with a wider header covering 100% of the page, I did not need the 16% borders on each side of my active area. Everything seems to be working fine, and I consider this issue solved. Thx.
    • Last Edit: 8 years 10 months ago by Pinto Buck.
    #1302885

Time to create page: 0.071 seconds