Need desperate help with responsive side navigation sizing
Permalink
Hello all, I'm currently using the boostrap theme and am trying to build a left side accordion navigation. When you click on the navigation button it then displays a form being pulled from an iframe. You can view at:
http://tresnadesigns.com/certain/index.php/resources/webinars/...
The iframe at:
http://www.tresnadesigns.com/certain/sidenavs/webinarsidenav.html...
My problem is that this is not responding to the responsive theme when the site is viewed on tablet/mobile. You'll notice that the calendar is overlapping and the side navigation isnt resizing at all.
I've been tinkering with the CSS with almost no luck. The CSS is located at:
http://tresnadesigns@www.tresnadesigns.com/certain/sidenavs/css/ind...
Can someone help me make this so it resizes the images properly or let me understand what I'm doing wrong? This is driving me crazy! Thank you for all you help in advance!!
http://tresnadesigns.com/certain/index.php/resources/webinars/...
The iframe at:
http://www.tresnadesigns.com/certain/sidenavs/webinarsidenav.html...
My problem is that this is not responding to the responsive theme when the site is viewed on tablet/mobile. You'll notice that the calendar is overlapping and the side navigation isnt resizing at all.
I've been tinkering with the CSS with almost no luck. The CSS is located at:
http://tresnadesigns@www.tresnadesigns.com/certain/sidenavs/css/ind...
Can someone help me make this so it resizes the images properly or let me understand what I'm doing wrong? This is driving me crazy! Thank you for all you help in advance!!
looks like you are using layouts , try to remove the layout and create a separate area in another span.
I built the menu in adobe muse - what do you mean by layouts (I'm a complete noob about all this and learning along the way).
You can't set widths and heights in px if you want them to resize in a responsive layout. You need to use percentages.
doh! Thank you, will try that out.
So I tried putting a width of 100% which worked fine, but then I put 100% height and it cut off all but two top buttons. Its seems to not be recognizing the size of the menu properly.
Yeah, height: 100% is less predictable than width: 100%.
But certainly, if you're pulling in an iFrame, then there's no way for the parent page to know the height of the content in that iFrame.
Rather than an iframe, I'd recommend creating a stack, and then placing it within your page. That might help.
That said, the design does not look like it'll translate well when you want it above your calendar...
But certainly, if you're pulling in an iFrame, then there's no way for the parent page to know the height of the content in that iFrame.
Rather than an iframe, I'd recommend creating a stack, and then placing it within your page. That might help.
That said, the design does not look like it'll translate well when you want it above your calendar...
Oh, and if you want images to scale to match a DIV, use this CSS:
img { max-width: 100% }
Your pagehttp://tresnadesigns.com/certain/index.php/resources/webinars/... has layouts which are not good for responsive design. Instead of using a layout to divide an area you should instead create two areas using span4 and then span8.
I suggest you speak with the designer of the theme as they will advise you.
I suggest you speak with the designer of the theme as they will advise you.
