While I've enjoyed tinkering with Montezuma, there's something about Atahualpa's structured menu options that I really just like. So I've been trying to hack ways to make Atahualpa more mobile-friendly with some CSS3 tricks. Here's what I came up with with a setup that uses:

Header: Menu, Logo, Bar 1, Images Bar 2
Body: Left sidebar, content, right sidebar

1) Add WP Responsive Menu as a plugin. There are a few out there but this is the one I liked the best.
2) Add the following to HTML/CSS inserts:

@media (max-width:632px)  {
#menu1, #left, #horbar1, #horbar2, #imagecontainer { display: none !important;}
#wrapper {width: 100% !important;}
table, thead, tbody, th, td, tr { display: block; }
	}

What this does:
@media calls out this CSS when the browser width is less than 632px.

At that width, the original menu, bars, and rotating image disappear. In addition, so does the left sidebar. In addition, all table cells then become block display. This shoves the right sidebar to the bottom.

It worked pretty well in all the ways I've been able to test so far, so I thought I'd share the knowledge.

Nice job! if someone wants to use the header image with the blog title overlay, leave out %logo in the 'Configure Header Area' option and remove ', #imagecontainer' from the below line

#menu1, #left, #horbar1, #horbar2, #imagecontainer { display: none !important;}

so you have

#menu1, #left, #horbar1, #horbar2 { display: none !important;}

I'm not sure how airtight this is (so far it looks good) but Flynn, feel free to incorporate this hack into a new update if you want.

Great thread bswb97! I'd like to make a couple additions, one in this post and one in my next (just to keep them separate). I've not yet done extensive testing either, but they've been working well from what I've been able to determine so far.

I have found that I prefer the Responsive Menu by Peter Featherstone.

Don't forget to place...

<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />

in the HTML Inserts:Header of the Atahualpa HTML/CSS Inserts page!


Scalable Header Image...

To make your header image scaleable by browser width (viewport) you can try the following.
In the ATA "Header Image" area go to "Header Image: Height" set it to 0 (yes, zero!) and save.

Now go to "HTML/CSS Inserts" area and add the following to "CSS Inserts"

div#imagecontainer {
background-size:cover !important;
padding-top:23.9%;
}

The percentage to use for the padding value will depend on the aspect ratio of your header image. i.e. If your header image is 980x234 px then 234÷980= .234, so the height of the image is 23.4% of its width.

This works because css figures top and bottom padding percentages relative to the width of the containing block. Background images will display beneath a block's padding, so if the top padding equals the height of the background image, the whole image will be visible. Even though we set the height to zero, the padding still contributes to the height of the container.

Since we have used the CSS3 background-size:cover property, the background image will scale with the width.

Presto! A scalable header image!

This took a little more work... ;-))

Scalable Blog Title...

CSS3 brings some new, nifty toys to play with. One of these is the length value "vw". A value of 1vw equals 1% of the viewport (browser) width. So this is a css "length" that will vary with the browser width.

I was playing with this and figured, "Well heck! If I have the Blog Title overlayed on top of the (scaleable) header image (previous post) I just made, this nifty vw value could be used to make the Blog Title scale right along with it! I entered "font-size: 1vw;", it was too small. So I played with the number until I got a Blog Title size that looked just right... I then made the browser smaller and smaller and the Blog Title got smaller and smaller.

Cool Beans!

That is until I realized that the Blog title was getting too small relative to the header image, and it was also losing its positioning vertically... Not my desired outcome.

So... With a bunch of playing around, I've been able to achieve an acceptable scaling and positioning. If you try this, you'll likely need to play with the numbers some depending on the font you choose.

Besides the new "vw" length measurement I mentioned, CSS3 also allows you to do some calculating within the css stylesheet by using the "calc()" function. Unfortunately, browser support for this is still buggy, so while at some point in the future there might be a more elegant solution, this works in Atahualpa now.

You'll need to realize that Atahualpa has two areas where you can add css that will affect the Blog Title.

In the "Header Image" area, the "Overlayed Blog Title/Tagline Style" is used to add css to the container that holds the Blog Title. Here is the css I used...

position:absolute;
height:100%;
top:0;
left:2vw;
font-size:1vw;

This positions the Blog Title container. The left:vw positions the container a little to the right and because it scales with browser witdth, that distance stays consistent.

The font-size is set here because in the next section (h2 tag) the buggy calc() function doesn't play nicely with vw in all browsers, however using em works. Because this container is the parent of the h2 tag, 1em will equal 1vw. As they say... "Its the same thing, only different!" LOL.

In the "Style & Edit HEADER AREA", "Blog Title" is css for the h2 tag for the Blog Title. Here is what I used to position and scale the Blog Title.

position:absolute;
bottom:10px;
width:20em;
padding: 0;
font-size:calc(18px + 1.6em);

The positioning and width are to ensure the correct placement of the h2 tag in its container. The width of 20em references the 1vw and so scales with the browser width.

Remember I mentioned that just scaling the Blog Title vs. the browser width made for the title being too small when the viewport (browser) was small? This is how I compensated for that. With the browser set to being small, I determined that 18px was a good size. I then expanded my browser to full desktop monitor size and then tweaked the em setting (which effectively changes as the browser gets smaller) for the largest that I wanted the font to appear.

The Blog Title now scales the way I want it to!

Nice! We're still finding plenty of muscle in this old engine!

Hi Ken,

I tried to follow this suggestion.

Originally Posted by kdawes01

Scalable Header Image...

To make your header image scaleable by browser width (viewport) you can try the following.
In the ATA "Header Image" area go to "Header Image: Height" set it to 0 (yes, zero!) and save.

Now go to "HTML/CSS Inserts" area and add the following to "CSS Inserts"

div#imagecontainer {
background-size:cover !important;
padding-top:23.9%;
}

The percentage to use for the padding value will depend on the aspect ratio of your header image. i.e. If your header image is 980x234 px then 234÷980= .234, so the height of the image is 23.4% of its width.

This works because css figures top and bottom padding percentages relative to the width of the containing block. Background images will display beneath a block's padding, so if the top padding equals the height of the background image, the whole image will be visible. Even though we set the height to zero, the padding still contributes to the height of the container.

My header images are 1210 x 200 px, and so I figured the aspect ratio of 16.53%. I set the height at 0, and then went to look for a good spot to add this code:

div#imagecontainer {
background-size:cover !important;
padding-top:16.53%;
}

At first, I went to ATO>Various Content Items>add HTML/CSS inserts. That didn't work, and so I went looking for other places, but really, they only affect overlay. Please let me know where I should add this.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra

For me, the

div#imagecontainer {
background-size:cover !important;
padding-top:16.53%;
}

(which goes in the 'CSS Inserts' option) ends up causing the image to overlay the sidebars and content UNLESS I set ATO->Header Image->Header Image: Height to no value - i.e. blank out the option

Originally Posted by juggledad

For me, the

div#imagecontainer {
background-size:cover !important;
padding-top:16.53%;
}

(which goes in the 'CSS Inserts' option) ends up causing the image to overlay the sidebars and content UNLESS I set ATO->Header Image->Header Image: Height to no value - i.e. blank out the option

I tried that both today and yesterday, and what happened is this: The header image showed up for about 1/10 of a second when I refreshed and promptly disappeared.

Do you have any suggestions on how I can make this work or perhaps an alternative approach?

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra

Do you have rotating header images by any chance?

Yup!

Is that a no-no?

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra

Well shut it off and see if it works

I assume @kdawes01 set this up using a static image. The rotating headers is a jscript that overrides the css. It changes the css to display the new file in the headerimage element. Since you have changed it's height to 0, there is no where to display it...well acrtually there is a place to display it, it's just that the place has a height of 0px so it is very very hard to see it

it might be possible to change the script to fix this. If you want to give it a go and are successful, post it here for others to try.

Thanks JD,

I'll give that a try. I was actually thinking of not rotating the header image to make the design of the site a little more elegant. I'll let you know if that works. I'm not sharp enough (yet) on CSS to be able to write such a script.

I'm developing the website on a locally-installed WAMP, and when I upload it to the www, I can post a link here if that's appropriate. (I'm not familiar enough with the way this site runs to know)

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra

Hello JD,

It works! I just have one header picture. Thank you so much for the help!

I set the ATO->Header Image->Header Image: Height to blank, at you suggestion to another poster.

I'm going to assume it's okay to post the link to my page, but if it isn't, please take it out. Click here to see the site.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra

Thanks so much for this, bswb97! This is working for me, and I'm expanding the code to make a few other changes when the "switch" happens.

I successfully got rid of the layout's drop shadow by adding

#container {
box-shadow: 0 0 0 0 !important;
-moz-box-shadow 0 0 0 0 !important;
}

But I can't figure out how to change the layout's left and right padding.

In ATO > Style & Configure LAYOUT > Layout Container Padding Left/Right, I have a value of 100px, and I want this to go to zero on a mobile. So I tried

#container {
padding-left 20px !important;
padding-right 20px !important;
}

But that had no effect. Any ideas? Thanks much!

Edit: Sorry, took another hard look at this with Firebug, and figured it out: It needed to be

div#container {
padding-left 20px !important;
padding-right 20px !important;
}

This is one mobile-friendly theme now! : )

Is it please possible to place the complete code to make Atahualpa responsive?

thanks in advance.
WebHeer

I tried this (but changed the ratio to 11.50%) and my header on my phone (or tablet) is still not as wide as the screen.

Originally Posted by juggledad

For me, the

div#imagecontainer {
background-size:cover !important;
padding-top:16.53%;
}

(which goes in the 'CSS Inserts' option) ends up causing the image to overlay the sidebars and content UNLESS I set ATO->Header Image->Header Image: Height to no value - i.e. blank out the option