Menu icon Foundation
Custom column width

Hello,

I have a custom layout and I can mostly use Foundation columns but there are couple of occasions that I need to use custom width for some columns.

I don´t want to just overwrite the CSS on app.css as I am not sure if that would be the best way to create a custom layout. I am a total newbie for the Foundation and any help is greatly appreciated. Please see my page layout attached.

Thanks.

Custom f5 layout.fw

custom columns

Hello,

I have a custom layout and I can mostly use Foundation columns but there are couple of occasions that I need to use custom width for some columns.

I don´t want to just overwrite the CSS on app.css as I am not sure if that would be the best way to create a custom layout. I am a total newbie for the Foundation and any help is greatly appreciated. Please see my page layout attached.

Thanks.

Custom f5 layout.fw
sankhabanerjee almost 5 years ago

As per your requirement the maximum width will be 940px, now you need to create some custom classes with your existing foundation classes like class="logo small-x". Now create a media query for the bigger screen like above 1024px (with min-width media query code) and create your static style in this portion where you don't need any responsive for your current project.

When the width decreases like below 1024, you foundation classes will provide you responsive layout.

I feel this is the most easy and less time consuming this you can do.