Menu icon Foundation

Coder | Breda, The Netherlands

I'm a client side engineer working for Energyworx.org in The Netherlands. I'm currently building a responsive (social) energy usage insight application based on the Zurb Foundation framework and AngularJS.

My Posts

No Content

My Comments

Roland commented on Wouter Kabbes's post about 5 years

There are multiple ways of doing that. A nice trick is to use a div wrapper which has a width of 100% and a gradient background.

Wrap your code with ie.

<div class="fullwidth">your code here</div>

and add this to your custom css.

.fullwidth {
background: -moz-linear-gradient(left,  #b4b1a5 0%, #b4b1a5 51%, #00a79d 51%, #00a79d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b4b1a5), color-stop(51%,#b4b1a5), color-stop(51%,#00a79d), color-stop(100%,#00a79d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #b4b1a5 0%,#b4b1a5 51%,#00a79d 51%,#00a79d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #b4b1a5 0%,#b4b1a5 51%,#00a79d 51%,#00a79d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #b4b1a5 0%,#b4b1a5 51%,#00a79d 51%,#00a79d 100%); /* IE10+ */
background: linear-gradient(to right,  #b4b1a5 0%,#b4b1a5 51%,#00a79d 51%,#00a79d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4b1a5', endColorstr='#00a79d',GradientType=1 ); /* IE6-9 */

}

css is generated by http://www.colorzilla.com/gradient-editor/

with Sass and Compass you could use a mixin from Compass

Roland commented on Alan Ashbaugh's post about 5 years

Can you post a link to your page?

Just to be sure you should also check your network tab to see if you have any 404 errors

Roland commented on Andrew Saint's post about 5 years

You can try the following (where #commentform is the id of your form):

 $('#commentform').attr('data-abide', '');

right before:

$(document).foundation();

Roland commented on Knubbi's post about 5 years

The rendering engine for Design view is a forked version of Webkit and appears to be multiplying the rem value by a factor of 10. It has nothing to do with Foundation, only lacking support for REM values in Dreamweaver. It's incapable of supporting many CSS level 3 properties.

"Live view uses the Chromium Embedded Framework and hence will give a more accurate browser-like rendering."

See: https://forums.adobe.com/message/6231849

Roland commented on Jonas Marlo Loerken's post about 5 years

I think the error message is clear, undefined variable. Make sure you define the variable before using it. Sass needs to be able to read the variable before it parses your class.

It would help to see your file and file structure...

Roland commented on Jay Merritt's post about 5 years

The most simple way is to add ie. the following to http://imagesocietymusic.com/css/extend.css

.row {
    max-width: 980px; //fill in whatever width you like
}

or calculate the rem value as Marc explained.

Btw. Did you notice important Javascript includes are not there or not in place?

http://imagesocietymusic.com/js/vendor/modernizr.js
http://imagesocietymusic.com/js/vendor/jquery.js
http://imagesocietymusic.com/js/vendor/fastclick.js

are called but return a 404

Roland commented on Martijn Elzinga's post about 5 years

hi, your url retruns a 404. Do you still need help?

Roland commented on Jay Merritt's post about 5 years

Is your website available online somewhere? There can be multiple solutions.

If you use Sass you can set the $row-width variable :
ie. $row-width: rem-calc(1000)

If you're not using Sass you need to define the class in your custom css to override the foundation class.

Or if the width of the rows are set to 100% you can place a wrapper around them where you define a width.

Roland commented on Gem Allard's post about 5 years

I think you should set "overflow:hidden" on the orbit-wrapper

.orbit-wrapper {
    overflow:hidden;
}

Just like the example on http://foundation.zurb.com/docs/components/orbit.html

Hope this helps...

Roland commented on Steven 's post about 5 years

You was referring to the output css. But the foundation files should be there when you instal it.

Assuming you are installing with compass:

when you create a project with: foundation new MYNEWPROJECT

the dependencies should be inside the directory bower_components

The default import path to the foundation scss files is (see config.rb)
add_import_path "bower_components/foundation/scss"

Do you see a directory "bower_components"

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Wouter Kabbes's post about 5 years

There are multiple ways of doing that. A nice trick is to use a div wrapper which has a width of 100% and a gradient background.

Wrap your code with ie.

<div class="fullwidth">your code here</div>

and add this to your custom css.

.fullwidth {
background: -moz-linear-gradient(left,  #b4b1a5 0%, #b4b1a5 51%, #00a79d 51%, #00a79d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b4b1a5), color-stop(51%,#b4b1a5), color-stop(51%,#00a79d), color-stop(100%,#00a79d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #b4b1a5 0%,#b4b1a5 51%,#00a79d 51%,#00a79d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #b4b1a5 0%,#b4b1a5 51%,#00a79d 51%,#00a79d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #b4b1a5 0%,#b4b1a5 51%,#00a79d 51%,#00a79d 100%); /* IE10+ */
background: linear-gradient(to right,  #b4b1a5 0%,#b4b1a5 51%,#00a79d 51%,#00a79d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4b1a5', endColorstr='#00a79d',GradientType=1 ); /* IE6-9 */

}

css is generated by http://www.colorzilla.com/gradient-editor/

with Sass and Compass you could use a mixin from Compass

You commented on Alan Ashbaugh's post about 5 years

Can you post a link to your page?

Just to be sure you should also check your network tab to see if you have any 404 errors

You commented on Andrew Saint's post about 5 years

You can try the following (where #commentform is the id of your form):

 $('#commentform').attr('data-abide', '');

right before:

$(document).foundation();

You commented on Knubbi's post about 5 years

The rendering engine for Design view is a forked version of Webkit and appears to be multiplying the rem value by a factor of 10. It has nothing to do with Foundation, only lacking support for REM values in Dreamweaver. It's incapable of supporting many CSS level 3 properties.

"Live view uses the Chromium Embedded Framework and hence will give a more accurate browser-like rendering."

See: https://forums.adobe.com/message/6231849

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

I think the error message is clear, undefined variable. Make sure you define the variable before using it. Sass needs to be able to read the variable before it parses your class.

It would help to see your file and file structure...

You commented on Jay Merritt's post about 5 years

The most simple way is to add ie. the following to http://imagesocietymusic.com/css/extend.css

.row {
    max-width: 980px; //fill in whatever width you like
}

or calculate the rem value as Marc explained.

Btw. Did you notice important Javascript includes are not there or not in place?

http://imagesocietymusic.com/js/vendor/modernizr.js
http://imagesocietymusic.com/js/vendor/jquery.js
http://imagesocietymusic.com/js/vendor/fastclick.js

are called but return a 404

You commented on Martijn Elzinga's post about 5 years

hi, your url retruns a 404. Do you still need help?

You commented on Jay Merritt's post about 5 years

Is your website available online somewhere? There can be multiple solutions.

If you use Sass you can set the $row-width variable :
ie. $row-width: rem-calc(1000)

If you're not using Sass you need to define the class in your custom css to override the foundation class.

Or if the width of the rows are set to 100% you can place a wrapper around them where you define a width.

You commented on Gem Allard's post about 5 years

I think you should set "overflow:hidden" on the orbit-wrapper

.orbit-wrapper {
    overflow:hidden;
}

Just like the example on http://foundation.zurb.com/docs/components/orbit.html

Hope this helps...

You commented on Steven 's post about 5 years

You was referring to the output css. But the foundation files should be there when you instal it.

Assuming you are installing with compass:

when you create a project with: foundation new MYNEWPROJECT

the dependencies should be inside the directory bower_components

The default import path to the foundation scss files is (see config.rb)
add_import_path "bower_components/foundation/scss"

Do you see a directory "bower_components"

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content