Menu icon Foundation

Designer | Cape Town, Western Cape

My Posts





My Comments

Raphael Rahner commented on Raphael Rahner's post about 3 years

ah... thanks for a speedy reply, Rafi.
I've created a website and I'm ready to upload it to the world wide web. I ran npm run build, can I upload the 'dist' and 'bower_components' directories to the server?
Will my live website function the same way as it did locally by uploading those two directories?

Raphael Rahner commented on Larry's post almost 4 years

Its a pleasure. Good luck. I'm sure someone will help soon.

All the best

Raphael Rahner commented on Larry's post almost 4 years

Man I wish I could help pal. I know how tasking it can be at times to figure out a small thing. My knowledge is not too great though. It might help others help you better if you posted your top-bar html markup. (Also something that I do lately is post a YouTube vid of my problem.)

Really sorry I dont have the answer.

Raphael Rahner commented on Larry's post almost 4 years
Raphael Rahner commented on Larry's post almost 4 years

Hi there Larry.

I am also very new to the framework (well and web dev in general) but I think I might be able to help out; at least a little bit. Here are some media queries which you may find helpful.

/* Mobile First! Always use the class .large-#.columns when starting a fresh website (if large works for mobile it will work for largest screen */


/* Universal (No media Query: Used for all styles unless specified in a media query below)
===============================================================================*/
#container {
    width: 1000000px;
    height: 100000px;        
    background: black;

} /* 1px and infinity px! */


/* Extra small (iPhone4)
=================================*/
@media only screen and (min-width: .063em) and (max-width: 20em) { 

    #container {
        background: yellow;  
    }

}/* 1px and max-width 320px */


/* Small (Mobile)
=================================*/
@media only screen and (min-width: 20.063em) and (max-width: 40em) {

    #container {
        background: orange;  
    }

}/* min-width 321px and max-width 640px */


/* Medium (Tablet)
=================================*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 

    #container {
        background: green;  
    }

} /* min-width 641px and max-width 1024px */


/* Large (Laptop)
=================================*/
@media only screen and (min-width: 64.063em) and (max-width: 90em) {

    #container {
        background: blue;  
    }

} /* min-width 1025px and max-width 1440px */


/* Extra large (Wide Screen)
=================================*/
@media only screen and (min-width: 90.063em) and (max-width: 120em) {

    #container {
        background: purple;  
    }

} /* min-width 1441px and max-width 1920px */

It helps a lot to make a folder with your css media queries and some really basic html. like this.

<!doctype html>
<html class="no-js" lang="en">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zurb Foundation Media Queries</title>
    <link rel="stylesheet" type="text/css" href="style.css">  
  </head>

  <body>

    <div id="container" class="large-12 columns"></div>

  </body>
</html>

Now extend and shrink your browser viewport to see which media query you need to add to your css to make the correct changes. (Purple only works on a wide screen)

hope this helps a bit.

Raphael Rahner commented on Raphael Rahner's post almost 4 years

Wow! Its WORKING, its WORKING... Fantastic answers, guys. Mr Benkual I totally <3 your codepens! super great stuff! Without you guys I dont know what I'd do.

Cant thank you both enough.

Raphael Rahner commented on Raphael Rahner's post almost 4 years

Oh my gosh you guys are awesome... I'm going to mess around with it a bit now and see if I come right. Thank you both for your help. Will let you know how it goes. Thank you Thank you!

Raphael Rahner commented on Raphael Rahner's post almost 4 years

Thank you very much Jules:-) I reckon this is going to help me out loads! I will play around with it soon. Been a bit out of it since I got my new android phone.

Raphael Rahner commented on Raphael Rahner's post almost 4 years

Hi there Rafi :D

Thank you so much for your effort. Unfortunately I'm not sure if this is the answer I'm looking for. My screen shots are not really demonstrating very well what I'm trying to achieve so I have made a YouTube video https://youtu.be/nfyd0oYeE3o to show you exactly where I'm stuck. I'd really appreciate more feedback on any kind of solutions to this issue.

Thanks

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Raphael Rahner's post about 3 years

ah... thanks for a speedy reply, Rafi.
I've created a website and I'm ready to upload it to the world wide web. I ran npm run build, can I upload the 'dist' and 'bower_components' directories to the server?
Will my live website function the same way as it did locally by uploading those two directories?

You commented on Larry's post almost 4 years

Its a pleasure. Good luck. I'm sure someone will help soon.

All the best

You commented on Larry's post almost 4 years

Man I wish I could help pal. I know how tasking it can be at times to figure out a small thing. My knowledge is not too great though. It might help others help you better if you posted your top-bar html markup. (Also something that I do lately is post a YouTube vid of my problem.)

Really sorry I dont have the answer.

You commented on Larry's post almost 4 years
You commented on Larry's post almost 4 years

Hi there Larry.

I am also very new to the framework (well and web dev in general) but I think I might be able to help out; at least a little bit. Here are some media queries which you may find helpful.

/* Mobile First! Always use the class .large-#.columns when starting a fresh website (if large works for mobile it will work for largest screen */


/* Universal (No media Query: Used for all styles unless specified in a media query below)
===============================================================================*/
#container {
    width: 1000000px;
    height: 100000px;        
    background: black;

} /* 1px and infinity px! */


/* Extra small (iPhone4)
=================================*/
@media only screen and (min-width: .063em) and (max-width: 20em) { 

    #container {
        background: yellow;  
    }

}/* 1px and max-width 320px */


/* Small (Mobile)
=================================*/
@media only screen and (min-width: 20.063em) and (max-width: 40em) {

    #container {
        background: orange;  
    }

}/* min-width 321px and max-width 640px */


/* Medium (Tablet)
=================================*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 

    #container {
        background: green;  
    }

} /* min-width 641px and max-width 1024px */


/* Large (Laptop)
=================================*/
@media only screen and (min-width: 64.063em) and (max-width: 90em) {

    #container {
        background: blue;  
    }

} /* min-width 1025px and max-width 1440px */


/* Extra large (Wide Screen)
=================================*/
@media only screen and (min-width: 90.063em) and (max-width: 120em) {

    #container {
        background: purple;  
    }

} /* min-width 1441px and max-width 1920px */

It helps a lot to make a folder with your css media queries and some really basic html. like this.

<!doctype html>
<html class="no-js" lang="en">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zurb Foundation Media Queries</title>
    <link rel="stylesheet" type="text/css" href="style.css">  
  </head>

  <body>

    <div id="container" class="large-12 columns"></div>

  </body>
</html>

Now extend and shrink your browser viewport to see which media query you need to add to your css to make the correct changes. (Purple only works on a wide screen)

hope this helps a bit.

You commented on Raphael Rahner's post almost 4 years

Wow! Its WORKING, its WORKING... Fantastic answers, guys. Mr Benkual I totally <3 your codepens! super great stuff! Without you guys I dont know what I'd do.

Cant thank you both enough.

You commented on Raphael Rahner's post almost 4 years

Oh my gosh you guys are awesome... I'm going to mess around with it a bit now and see if I come right. Thank you both for your help. Will let you know how it goes. Thank you Thank you!

You commented on Raphael Rahner's post almost 4 years

Thank you very much Jules:-) I reckon this is going to help me out loads! I will play around with it soon. Been a bit out of it since I got my new android phone.

You commented on Raphael Rahner's post almost 4 years

Hi there Rafi :D

Thank you so much for your effort. Unfortunately I'm not sure if this is the answer I'm looking for. My screen shots are not really demonstrating very well what I'm trying to achieve so I have made a YouTube video https://youtu.be/nfyd0oYeE3o to show you exactly where I'm stuck. I'd really appreciate more feedback on any kind of solutions to this issue.

Thanks

Posts Followed

Following

  • No Content

Followers

  • No Content