[css-d] making a site responsive - first step: making it all fluid
Hi all, Thanks so for help and tips on making a site responsive. This is the site i have to make a responsive version for: http://www.utrechtsyogacentrum.nl Reading all information provided i thought making the existing site completely fluid would be a good first step. This is the result so far: http://beta.utrechtsyogacentrum.nl How does this look on your different systems? Any comments are welcome. Thanks, Erik __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] question about css-only mobile responsive menu
On Thu, May 21, 2015 at 2:40 PM, Chris Kavinsky ckavin...@gmail.com wrote: I came across this blog post and demo for a css-only responsive menu and I've been playing with it to figure out the nuances of how it works. One problem I've run into is that when the demo screen is reduced, the menu appears as intended. I copied the file and css exactly as the demo page (I even did a strait save as), but when I reduce the screen (using the same browser as the demo), the menus won't appear when I click on the button link. I can't figure out why my local version isn't working. Does anyone have the same issue or know what I'm overlooking. blog post: http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ demo: http://medialoot.com/preview/css-only-navigation-menu/index.html __ Working ok for me in latest Chrome, FF and Safari (all Mac) . Do you have a link to your version on a server somewhere? -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] question about css-only mobile responsive menu
I came across this blog post and demo for a css-only responsive menu and I've been playing with it to figure out the nuances of how it works. One problem I've run into is that when the demo screen is reduced, the menu appears as intended. I copied the file and css exactly as the demo page (I even did a strait save as), but when I reduce the screen (using the same browser as the demo), the menus won't appear when I click on the button link. I can't figure out why my local version isn't working. Does anyone have the same issue or know what I'm overlooking. blog post: http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ demo: http://medialoot.com/preview/css-only-navigation-menu/index.html __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I dont want to receive anymore the ..... Re: making a site responsive - first step: making it all fluid
Go here: http://www.css-discuss.org/mailman/listinfo/css-d From: m.hofstet...@laposte.net [mailto:m.hofstet...@laposte.net] Sent: Thursday, May 21, 2015 10:04 AM To: Greg Gamble Cc: Erik Visser; css-d@lists.css-discuss.org Subject: I dont want to receive anymore the [css-d] . Re: [css-d] making a site responsive - first step: making it all fluid I dont want to receive your [css-d] . I have ask how stop it ! I have no PSW to go out the list ! help ! ololamater De: Greg Gamble ggam...@sbctc.edumailto:ggam...@sbctc.edu À: Erik Visser e...@erikvisser.netmailto:e...@erikvisser.net, css-d@lists.css-discuss.orgmailto:css-d@lists.css-discuss.org Envoyé: Jeudi 21 Mai 2015 18:09:13 Objet: Re: [css-d] making a site responsive - first step: making it all fluid Nokia Lumia 928 with Windows 8.1 https://onedrive.live.com/redir?resid=8CC6289D78781182!37270authkey=!AAijgwhoBRaWByIv=3ithint=photo%2cpng Greg -Original Message- From: css-d-boun...@lists.css-discuss.orgmailto:css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Erik Visser Sent: Thursday, May 21, 2015 2:32 AM To: css-d@lists.css-discuss.orgmailto:css-d@lists.css-discuss.org Subject: [css-d] making a site responsive - first step: making it all fluid Hi all, Thanks so for help and tips on making a site responsive. This is the site i have to make a responsive version for: http://www.utrechtsyogacentrum.nl Reading all information provided i thought making the existing site completely fluid would be a good first step. This is the result so far: http://beta.utrechtsyogacentrum.nl How does this look on your different systems? Any comments are welcome. Thanks, Erik __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with responsive menu dropdown
Oh crap. I completely overlooked that. That solved the problem. Thanks
Philippe.
On Thu, May 21, 2015 at 12:24 AM, Philippe Wittenbergh e...@l-c-n.com
wrote:
Le 21 mai 2015 à 04:06, Chris Kavinsky ckavin...@gmail.com a écrit :
I'm trying to retrofit an existing site that's using a horizontal
navigation menu with dropdowns. The problem I'm having is getting the
menu
to appear on:click when the screen size is smaller. Its doing it entirely
using css. I created a static version before moving it to the wordpress
site, and it worked there. However, its not working on wordpress. Does
anything jump out to anyone as to what the problem is?
here's the model I grabbed the css code from:
http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
here's the live site I'm working on:
http://www.aircompressors.com/
Your “button”-link points to a #nav as target. However there is no element
with id=nav in your code, that I could find. Do you mean to point to the
element with ID=primary-navigation? if so, you should correct the “href” in
your button link to point to that (a href=primary-navigation), and then
make sure your stylesheet references that.
#primary-navigation:target { /* do something */ }
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] making a site responsive - first step: making it all fluid
21 maj 2015 kl. 11:31 skrev Erik Visser e...@erikvisser.net: This is the result so far: http://beta.utrechtsyogacentrum.nl How does this look on your different systems? Looks sort of alright on the computer. That the left column overlaps into the main column at more narrow widths, like on a modern iPhone is something I assume you know already. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] making a site responsive - first step: making it all fluid
Small screen has issues still. I assume you know this. iPhone 6+: http://tomliv.com/css-d/IMG_0162.PNG On Thu, May 21, 2015 at 5:31 AM, Erik Visser e...@erikvisser.net wrote: Hi all, Thanks so for help and tips on making a site responsive. This is the site i have to make a responsive version for: http://www.utrechtsyogacentrum.nl Reading all information provided i thought making the existing site completely fluid would be a good first step. This is the result so far: http://beta.utrechtsyogacentrum.nl How does this look on your different systems? Any comments are welcome. Thanks, Erik __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] making a site responsive - first step: making it all fluid
Erik Visser wrote: This is the result so far: http://beta.utrechtsyogacentrum.nl How does this look on your different systems? Any comments are welcome. Not good as the window narrows : the left navigation aids overlap both the vertical dashed divider line and the text to the right of that line. Screen capture available on request. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] making a site responsive - first step: making it all fluid
Den 21.05.2015 05:31, skrev Erik Visser:
Hi all,
Thanks so for help and tips on making a site responsive.
This is the site i have to make a responsive version for:
http://www.utrechtsyogacentrum.nl
Hi Erik,
You do not have to make your page responsive on wide screens, in order
to make it fit narrow screens. I suggest you manipulate the original
design through a series of mediaqueries, to make it work on narrower
screens.
That is: a mobile last approach that may be easier to implement in
cases like yours.
If you add the following CSS at the very bottom of your existing
stylesheet for the _original_ site-version, you should get a pretty good
idea of how to make your site more responsive and mobile-friendly.
@media screen and (max-width: 980px) and (min-width: 801px) {
#banner{width:98%; height:auto;}
#content_wrapper{width:100%;}
#content_left{width:20%;}
#content_midd{width:67%;}
#content_right{width:100%;}
img#logo {top: 0; left: 0}
}
@media screen and (max-width: 801px) and (min-width: 300px) {
#banner{width:98%; height:auto;}
#content_wrapper{width:100%;}
#content_left{width:95%;}
#content_midd{width:80%;}
#content_right{width:100%;}
img#logo {top: 0; left: 0}
}
I have only manipulated some of the basic elements, and none of the
break-points or values I have used are anywhere near being perfect or
final. You may also want to add one or two more mediaqueries, to create
finer steps down towards the smallest screens.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] making a site responsive - first step: making it all fluid
Nokia Lumia 928 with Windows 8.1 https://onedrive.live.com/redir?resid=8CC6289D78781182!37270authkey=!AAijgwhoBRaWByIv=3ithint=photo%2cpng Greg -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Erik Visser Sent: Thursday, May 21, 2015 2:32 AM To: css-d@lists.css-discuss.org Subject: [css-d] making a site responsive - first step: making it all fluid Hi all, Thanks so for help and tips on making a site responsive. This is the site i have to make a responsive version for: http://www.utrechtsyogacentrum.nl Reading all information provided i thought making the existing site completely fluid would be a good first step. This is the result so far: http://beta.utrechtsyogacentrum.nl How does this look on your different systems? Any comments are welcome. Thanks, Erik __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
