Menu icon Foundation

Engineer | Nova Scotia, Canada

Author: Getting Started with Zurb Foundation 4, Packt Publishing

My Posts

  • 1
    Reply
  • scssphp tweak

    By Andrew Patterson

    scssphp

    For anyone who is compiling Foundation scss with scssphp, the resulting css is quite large since Zurb started including global.scss in every component. It gets included every time. I've added an option to scssphp so that files can be imported only once. Y... (continued)

    Last Reply by Andrew Patterson about 4 years ago



My Comments

Andrew Patterson commented on Fernando Arbulu Perrella's post about 1 month

The success of this would depend on how well the Zurb grid maps to the WP grid. One approach would be to 'extend' specific Zurb classes to their equivalent WP classes using SASS (SCSS). Then replace the Gutenberg style sheet with the new derived style sheet.

Andrew Patterson commented on Kerstin Finke's post almost 3 years

Carlos, try putting the css for row8cols in a media query so it only applies to large screens. You can find examples in the foundation css. I haven't tried the flex grid yet, but it looks interesting.
Another possibility for your specific situation would be to define your own column width class and use it instead of large-1. For example:
@media ... {
.lg-1-8 {
width: 12.5%;
}
}
It needs to be in a media query so it only affects large screens. You can remove the row8cols div and replace large-1 with lg-1-8 on the column divs.
Andrew P.

Andrew Patterson commented on Andrew Patterson's post about 4 years

Update: processing the !global attribute has been added to scssphp so the above hack is no longer required. AP

Andrew Patterson commented on Jay Dcoder's post over 4 years

I may be late to the party on this one but there is a very simple solution.

Instead of having the width of the .row class at 100%, set it to the maximum width of your site.

Example:

.row { width: 62.5rem }

This will only affect outer rows (presumably your site width) as the width of inner rows is determined by the .row .row combination.

Andrew P.

Andrew Patterson commented on Elvis Dieguez's post over 5 years

Try being more explicit in your custom style sheet:

input.contact_name {width: 500px;}
input.contact_msg {width: 500px; height: 300px;}

This should override Foundation's default width for these specific fields.

Andrew P.

Andrew Patterson commented on Vladimir Bogdanic's post over 5 years

I can confirm that I have seen this top bar problem when using Opera. It's like Opera is always displaying the small screen view. Re Interchange I haven't tried that in Opera.

Sorry this doesn't solve anything. Just feedback that it is indeed a problem.

Andrew Patterson commented on Colin Cheverie's post over 5 years

Colin, if you are using the SASS install it is a little more complex. But you can still do it. I don't recall the syntax off the top of my head, but there are ways to install a specific version of Foundation into a folder.

Maybe someone who recalls the syntax, or knows a link to same, will jump in here.

Andrew P.

Andrew Patterson commented on Colin Cheverie's post over 5 years

Yes, just install in a separate folder.

Andrew Patterson commented on Sebastian A.'s post over 5 years

I believe you'll find that your problem is a result of column padding. Columns include padding and that is fixed width. Therefore, when decreasing the width of the browser, narrower images get squeezed a greater percentage than wider ones. Since the height is proportional, it also decreases more.

One solution I've used in this situation is to make the padding itself proportional on columns:

.column, .columns {
  padding-left: 2.5%;
  padding-right: 2.5%;
}
.row .row {
  margin-left: -2.5%;
  margin-right: -2.5%;
}

For completeness you also need to make the left and right margins of inner rows proportional.

When you do this your images that use a different number of cells will scale proportionally because the padding now scales along with the image.

Hope this helps,

Andrew P.

Andrew Patterson commented on Ido Doron's post over 5 years

Try putting the image on the body instead of html. And make sure the image url is visible from the style sheet where this is coded.

Andrew P.

Posts Followed



  • 11
    Replies
  • Sticky Footer

    By Charles Smith

    I have been looking around and around for an answer to this; I've found many forums where others are asking, but no real straight forward solution. Is there a class or JS that will create the sticky footer like on the Foundation website that works seamle... (continued)

    Last Reply by Douglas Olena about 4 years ago


Following

    No Content

Followers

My Posts



My Comments

You commented on Fernando Arbulu Perrella's post about 1 month

The success of this would depend on how well the Zurb grid maps to the WP grid. One approach would be to 'extend' specific Zurb classes to their equivalent WP classes using SASS (SCSS). Then replace the Gutenberg style sheet with the new derived style sheet.

You commented on Kerstin Finke's post almost 3 years

Carlos, try putting the css for row8cols in a media query so it only applies to large screens. You can find examples in the foundation css. I haven't tried the flex grid yet, but it looks interesting.
Another possibility for your specific situation would be to define your own column width class and use it instead of large-1. For example:
@media ... {
.lg-1-8 {
width: 12.5%;
}
}
It needs to be in a media query so it only affects large screens. You can remove the row8cols div and replace large-1 with lg-1-8 on the column divs.
Andrew P.

You commented on Andrew Patterson's post about 4 years

Update: processing the !global attribute has been added to scssphp so the above hack is no longer required. AP

You commented on Jay Dcoder's post over 4 years

I may be late to the party on this one but there is a very simple solution.

Instead of having the width of the .row class at 100%, set it to the maximum width of your site.

Example:

.row { width: 62.5rem }

This will only affect outer rows (presumably your site width) as the width of inner rows is determined by the .row .row combination.

Andrew P.

You commented on Elvis Dieguez's post over 5 years

Try being more explicit in your custom style sheet:

input.contact_name {width: 500px;}
input.contact_msg {width: 500px; height: 300px;}

This should override Foundation's default width for these specific fields.

Andrew P.

You commented on Vladimir Bogdanic's post over 5 years

I can confirm that I have seen this top bar problem when using Opera. It's like Opera is always displaying the small screen view. Re Interchange I haven't tried that in Opera.

Sorry this doesn't solve anything. Just feedback that it is indeed a problem.

You commented on Colin Cheverie's post over 5 years

Colin, if you are using the SASS install it is a little more complex. But you can still do it. I don't recall the syntax off the top of my head, but there are ways to install a specific version of Foundation into a folder.

Maybe someone who recalls the syntax, or knows a link to same, will jump in here.

Andrew P.

You commented on Colin Cheverie's post over 5 years

Yes, just install in a separate folder.

You commented on Sebastian A.'s post over 5 years

I believe you'll find that your problem is a result of column padding. Columns include padding and that is fixed width. Therefore, when decreasing the width of the browser, narrower images get squeezed a greater percentage than wider ones. Since the height is proportional, it also decreases more.

One solution I've used in this situation is to make the padding itself proportional on columns:

.column, .columns {
  padding-left: 2.5%;
  padding-right: 2.5%;
}
.row .row {
  margin-left: -2.5%;
  margin-right: -2.5%;
}

For completeness you also need to make the left and right margins of inner rows proportional.

When you do this your images that use a different number of cells will scale proportionally because the padding now scales along with the image.

Hope this helps,

Andrew P.

You commented on Ido Doron's post over 5 years

Try putting the image on the body instead of html. And make sure the image url is visible from the style sheet where this is coded.

Andrew P.

Posts Followed


Following

  • No Content

Followers

  • No Content