responsive standardtemplate

[Thomas Pientka]

hi bill, i don’t know if it’s because we put the menu on top of the content, but somehow the responsive layout of a standardtemplate page with a feature image and text content is messed up.

1) the image resizes but it gets a grey bar on top. the height is equal to the height of the menu (so i thing it’s causing the issue).

2) you cannot see any content below (i think because it’s because of a given height), it gets cut.
you can see in the screenshot what’s going on.

thanks
thomas

Attachments:

1. 

   Screenshot256.png
   

[Bill Robbins]

Thomas,

I’d be glad to take a look for you. Can you send over the URL to that page? It’ll help me, help you out.

Bill

[Thomas Pientka]

This reply has been marked as private.

[Bill Robbins]

Thomas,

On smaller screen sizes, the navigation menu gets position: relative instead of absolute. You could try changing it to position: absolute like this:

@media only screen and (max-width: 767px) {
	
	#nav-bar {
		position: absolute;	
	}
	
	#home-sidebar, 
	#panel { 
		height: 500px; 
	}
	
}

That also sets a height for the scroll panel so it doesn’t disappear anymore since the default height was overridden earlier.

Hope that points you in the right direction.

Enjoy your week,
Bill

[Thomas Pientka]

hey bill, this is looking good for the menu!

[Thomas Pientka]

hey bill, this is looking good for the menu!

is it possible to have the whole text content underneath the picture?
for mobile users you will have a scrollable content plus a scrollbar on the side from the browser of the phone. it would be cool only to have that browser scrollbar and see the whole text.
i tried to set the height to auto, but this will shrink it to the beginning.
i noticed that in responsive mode you put the text content from the home slide also underneath in a box with a given height. on a normal page without picture everything works fine (you can see the wohle content no matter how long it is).

thomas

[Bill Robbins]

I think it’s just that the home page has less content so it doesn’t have to scroll. If I look at the home page on the demo, it has a scroll bar.

You’re welcome to experiment.

[Thomas Pientka]

hey bill maybe you misunderstood. if the content is under the picture the height of that div is set.
so if there is more content a scrollbar will be on the right. that’s fine in desktop mode. but inconvienant for mobile users. also this can lead to another layout issue: i set the height to: 515px which is good for the content for the vita page. at the home page i have to lines saying hello.
in dekstop mode this is no problem (it’s on the right overlay of the image).
but in mobile mode this makes the vita page with a scrollbar and the homepage without a scrollbar but a 500px box that is obviously not filled with any content.

so it would be cool to set the height of the #home-sidebar, #panel not to a special px but let the content be the decision. this will make the whole layout more persistent and reliable.

thomas

[Bill Robbins]

Thomas,

I do believe I understand what you’re describing. It’s been quite a while since this theme was built, but I believe I had to set a height to that container in order to keep it from being collapsed by the JavaScript that provides for the scroll bar there.

You’re welcome to experiment if you’d like to, but your on your own there.

Take care,
Bill

[Author]

Posts