Menu icon Foundation
Sidebar with accordion issue

Issue 1 & 2:

- The left sidebar with accordion doesn't look right on iPad, it moved down to bottom and not visible but visible on desktop and on iPhone it is at the bottom. Anyone know what the issue and how can I fix it?
- The footer at bottom has 4 columns and on iPad it shows 3 columns with © Brownstone Furniture Ph & Fx jumped to just above the Facebook, Pinterest, and Twitter icons not aligned and too close. How to fix it?
- Here is the link to see the layout to see what I mean:
http://bridgetmoore.com/foundation-5-2/index_testBMv3.html

left sidebar with accordion issues on iPad vs. desktop vs. tabletfooter

Issue 1 & 2:

- The left sidebar with accordion doesn't look right on iPad, it moved down to bottom and not visible but visible on desktop and on iPhone it is at the bottom. Anyone know what the issue and how can I fix it?
- The footer at bottom has 4 columns and on iPad it shows 3 columns with © Brownstone Furniture Ph & Fx jumped to just above the Facebook, Pinterest, and Twitter icons not aligned and too close. How to fix it?
- Here is the link to see the layout to see what I mean:
http://bridgetmoore.com/foundation-5-2/index_testBMv3.html

sudheer almost 5 years ago

Hello Bridget.

  • If you want accordian to be placed at the left of screen even on ipad change the div class to medium-9 and medium-3 for the image and accordian. If you want to have accordian at the bottom of the page even on Ipad then you have add few lines of css.
@media only screen and (min-width: 40.063em)
.pull-9 {
right:0%;
}
@media only screen and (min-width: 40.063em)
.push-3 {
left:0%
}

and keep the div with large-9 and large-3 columns.

the problem with layout on ipad is because of the pull and push css in media querie.

-coming to footer you have large-4 and medium-4 as div classes .large-4 has a width of 25% according to css so on large screens you have four column structure but where as medium-4 has 33.333% which makes the fourth column drop to new row.

change the div classes for footer to large-3 and medium-3 .

PS :Dont edit the default foundation.css add custom styles to another stylesheet and include that into your HTML. (you have changed you large-4 div from 33.33% to 25%.creates a problem if have to use large-4 div for someother column with 33.33%)

Lyn almost 5 years ago

Hey there,

When you say :

- The left sidebar with accordion doesn't look right on iPad, it moved down to bottom and not visible but visible on desktop and on iPhone it is at the bottom. Anyone know what the issue and how can I fix it?

What exactly are you expecting your left bar to do ?
You want it to stay where it is ? want it to hide itself ?

About your footer, what are you expecting it to do too ?

If I also may add, I totally join sudheer advice :

Dont edit the default foundation.css add custom styles to another stylesheet and include that into your HTML.

Regards,

Lyn.