Menu icon Foundation

Designer | Gagra, Abkhazia

Explorer

My Posts

No Content

My Comments

Tomi Tomion commented on Sam Smith's post over 5 years

I still haven't a clue of what's going on there. However I think you don't need the map to be 100% since there is the sticky top-bar. But yes, 95% is a pretty rough way.

Try next bit of code, it just compensates the height of the top-bar (2.8125rem in your css) more precisely. Gonna work better on different resolutions.

#map {
  height: calc(100% - 2.8125rem);
}

Tomi Tomion commented on Thomas E. Vasquez's post over 5 years

Could help with Russian, but it seems to be already done.

Tomi Tomion commented on Lucija Kordic's post over 5 years

Look for .tooltip > .nub selectors. You have to adjust the border-color for each media queries and tooltip positions(top, left, etc.).

Tomi Tomion commented on Craig's post over 5 years

If it works don't fix it. That's why the developers don't upgrade it I guess.

Tomi Tomion commented on Marc Pirard's post over 5 years
Tomi Tomion commented on CiFa's post over 5 years

Foundation is a CSS framework, not a WP theme, although there are some WP themes and frameworks based on Foundation.

http://themefortress.com/reverie/
http://themeawesome.com/responsive-wordpress-theme

and some others, google it)))

Tomi Tomion commented on Rahul Saini's post over 5 years

Yeap, sure

medium-3 medium-centered columns

medium-offset-6 medium-6 columns

Tomi Tomion commented on Danylo's post over 5 years

No there is no xx/xlarge-block-grid by default, but you can add it easily using media queries

Add this code to your CSS file

@media only screen and (min-width: 90.063em) {
  .xlarge-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .xlarge-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .xlarge-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .xlarge-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .xlarge-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .xlarge-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .xlarge-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .xlarge-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .xlarge-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .xlarge-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .xlarge-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .xlarge-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .xlarge-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .xlarge-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .xlarge-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .xlarge-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .xlarge-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .xlarge-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .xlarge-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .xlarge-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .xlarge-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .xlarge-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .xlarge-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .xlarge-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
@media only screen and (min-width: 120.063em) {
  .xxlarge-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .xxlarge-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .xxlarge-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .xxlarge-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .xxlarge-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .xxlarge-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .xxlarge-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .xxlarge-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .xxlarge-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .xxlarge-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .xxlarge-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .xxlarge-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .xxlarge-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .xxlarge-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .xxlarge-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .xxlarge-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .xxlarge-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .xxlarge-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .xxlarge-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .xxlarge-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .xxlarge-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .xxlarge-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .xxlarge-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .xxlarge-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }

Tomi Tomion commented on Jonas Marlo Loerken's post over 5 years

Almost, default is 970px of content and 15px +15px of left and right padding, so the width is 1000px ))

Tomi Tomion commented on JapperCat's post over 5 years

Never tried, but I guess there could be some styling and missing glyphicons issues, although still you can download it as a single plugin.

But I think it's not the best choice due to lack of IE9 CSS3 animation support. They say "We have intentionally decided not to include jQuery-based fallbacks for the transitions."

Check this post for options http://foundation.zurb.com/forum/posts/14504-moving-on-from-developing-orbit

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Sam Smith's post over 5 years

I still haven't a clue of what's going on there. However I think you don't need the map to be 100% since there is the sticky top-bar. But yes, 95% is a pretty rough way.

Try next bit of code, it just compensates the height of the top-bar (2.8125rem in your css) more precisely. Gonna work better on different resolutions.

#map {
  height: calc(100% - 2.8125rem);
}

You commented on Thomas E. Vasquez's post over 5 years

Could help with Russian, but it seems to be already done.

You commented on Lucija Kordic's post over 5 years

Look for .tooltip > .nub selectors. You have to adjust the border-color for each media queries and tooltip positions(top, left, etc.).

You commented on Craig's post over 5 years

If it works don't fix it. That's why the developers don't upgrade it I guess.

You commented on Marc Pirard's post over 5 years
You commented on CiFa's post over 5 years

Foundation is a CSS framework, not a WP theme, although there are some WP themes and frameworks based on Foundation.

http://themefortress.com/reverie/
http://themeawesome.com/responsive-wordpress-theme

and some others, google it)))

You commented on Rahul Saini's post over 5 years

Yeap, sure

medium-3 medium-centered columns

medium-offset-6 medium-6 columns

You commented on Danylo's post over 5 years

No there is no xx/xlarge-block-grid by default, but you can add it easily using media queries

Add this code to your CSS file

@media only screen and (min-width: 90.063em) {
  .xlarge-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .xlarge-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .xlarge-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .xlarge-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .xlarge-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .xlarge-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .xlarge-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .xlarge-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .xlarge-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .xlarge-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .xlarge-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .xlarge-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .xlarge-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .xlarge-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .xlarge-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .xlarge-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .xlarge-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .xlarge-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .xlarge-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .xlarge-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .xlarge-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .xlarge-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .xlarge-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .xlarge-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .xlarge-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
@media only screen and (min-width: 120.063em) {
  .xxlarge-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .xxlarge-block-grid-1 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .xxlarge-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .xxlarge-block-grid-2 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .xxlarge-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .xxlarge-block-grid-3 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .xxlarge-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .xxlarge-block-grid-4 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .xxlarge-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .xxlarge-block-grid-5 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .xxlarge-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .xxlarge-block-grid-6 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .xxlarge-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .xxlarge-block-grid-7 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .xxlarge-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .xxlarge-block-grid-8 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .xxlarge-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .xxlarge-block-grid-9 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .xxlarge-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .xxlarge-block-grid-10 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .xxlarge-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .xxlarge-block-grid-11 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .xxlarge-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .xxlarge-block-grid-12 > li:nth-of-type(n) {
      clear: none; }
    .xxlarge-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }

You commented on Jonas Marlo Loerken's post over 5 years

Almost, default is 970px of content and 15px +15px of left and right padding, so the width is 1000px ))

You commented on JapperCat's post over 5 years

Never tried, but I guess there could be some styling and missing glyphicons issues, although still you can download it as a single plugin.

But I think it's not the best choice due to lack of IE9 CSS3 animation support. They say "We have intentionally decided not to include jQuery-based fallbacks for the transitions."

Check this post for options http://foundation.zurb.com/forum/posts/14504-moving-on-from-developing-orbit

Posts Followed

Following

  • No Content

Followers

  • No Content