Menu icon Foundation

Engineer | San Jose, CA

#1 Intern at ZURB

My Posts




  • 2
    Replies
  • Google Map CSS Issue

    By Jeff Simpson

    Google MapsCSS3

    I am building a web site based on Foundation and I am using Google map to display some markers on it. The problem is that I have lose the map control elements from the top left (zoom in and zoom out) and I cannot fix it. Is there a way to fix that i... (continued)

    Last Reply by Alessandro Vit over 5 years ago




My Comments

Jeff Simpson commented on Bo Sjosten's post almost 6 years

Upgrading Foundation Compass projects (http://foundation.zurb.com/docs/sass.html) compass create my_awesome_project -r zurb-foundation --using foundation

my_awesome_project/
scss/ These are specific to this project
_settings.scss All available Foundation variables are here
app.scss @import "foundation"

Jeff Simpson commented on Jeff Simpson's post almost 6 years

The Problem was indeed a CSS setting. I am using the zurb foundation framework, which defines max-width for all images.

max-width: 100%;

Fixed it, by adding my own css class to the map div. It overrides the max-width setting and the Markers are back to normal.

<div id="gmap" class="map_canvas" />

.map_canvas img {
    max-width: none !important;
}

Jeff Simpson commented on Jeff Simpson's post almost 6 years

My company has just recently switched to exclusive F4 use. We are not at all against Bootstrap, but here are the reasons we made our decision:

More semantic classes: this is of course a matter of opinion, but for us this can shave time off of a build.

A golden standard: You can hand F4 to just about anyone with html and css knowledge and you will see VERY similar markup for the same site from nearly all. This means it becomes much easier to contract out help if need be, and ensure quality design.

The UI: Yes Bootstrap wins this if you judge on it alone, but if you look at it as a whole really the UI of foundation is very close. Plus lets keep in mind that you can customize any of it with app.css

Zepto: I am a fan. What can I say. SEO is part of our world, and fast loads mean something, and even leaving SEO out....fast loads = less bounce.

SEO: Google has already come out and recommended responsive design for mobile SEO.

Why not?: What site can I not recreate with the framework. It is still CSS. It does force us to rethink how we code, but isn't that why we love to code in the first place? Figuring out solutions to simplify design?

Sorry for the novel. Just my take on it, and I know its not really 100% subject matter. In reality F4 vs Bootstrap 3 is really a moo point. If you are on-board with responsive you are making yourself marketable. If you are not then you are completely ignoring the direction that technology is heading and you should get out of the game.

Jeff Simpson commented on Jeff Simpson's post almost 6 years

I'm afraid this doesn't work as you are thinking here.

The font-size won't respond like this with the resizing of the browser window. Instead they respond to the browser zoom/type size settings, such as if you press ctrl and + together on the keyboard in the browser.

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.

For example inside your CSS try adding this at the bottom changing the 320px width for wherever your design starts breaking:

@media only screen and (max-width: 320px) {

   body { font-size: 2em; }

}

Jeff Simpson commented on Jeff Simpson's post almost 6 years

I found out the solution and it is quit simple:

#map img
{
    max-width : none;
}

I just posted out for other developers.

Thanks for your time ... !

Posts Followed


Following

Followers

My Posts

My Comments

You commented on Bo Sjosten's post almost 6 years

Upgrading Foundation Compass projects (http://foundation.zurb.com/docs/sass.html) compass create my_awesome_project -r zurb-foundation --using foundation

my_awesome_project/
scss/ These are specific to this project
_settings.scss All available Foundation variables are here
app.scss @import "foundation"

You commented on Jeff Simpson's post almost 6 years

The Problem was indeed a CSS setting. I am using the zurb foundation framework, which defines max-width for all images.

max-width: 100%;

Fixed it, by adding my own css class to the map div. It overrides the max-width setting and the Markers are back to normal.

<div id="gmap" class="map_canvas" />

.map_canvas img {
    max-width: none !important;
}

You commented on Jeff Simpson's post almost 6 years

My company has just recently switched to exclusive F4 use. We are not at all against Bootstrap, but here are the reasons we made our decision:

More semantic classes: this is of course a matter of opinion, but for us this can shave time off of a build.

A golden standard: You can hand F4 to just about anyone with html and css knowledge and you will see VERY similar markup for the same site from nearly all. This means it becomes much easier to contract out help if need be, and ensure quality design.

The UI: Yes Bootstrap wins this if you judge on it alone, but if you look at it as a whole really the UI of foundation is very close. Plus lets keep in mind that you can customize any of it with app.css

Zepto: I am a fan. What can I say. SEO is part of our world, and fast loads mean something, and even leaving SEO out....fast loads = less bounce.

SEO: Google has already come out and recommended responsive design for mobile SEO.

Why not?: What site can I not recreate with the framework. It is still CSS. It does force us to rethink how we code, but isn't that why we love to code in the first place? Figuring out solutions to simplify design?

Sorry for the novel. Just my take on it, and I know its not really 100% subject matter. In reality F4 vs Bootstrap 3 is really a moo point. If you are on-board with responsive you are making yourself marketable. If you are not then you are completely ignoring the direction that technology is heading and you should get out of the game.

You commented on Jeff Simpson's post almost 6 years

I'm afraid this doesn't work as you are thinking here.

The font-size won't respond like this with the resizing of the browser window. Instead they respond to the browser zoom/type size settings, such as if you press ctrl and + together on the keyboard in the browser.

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.

For example inside your CSS try adding this at the bottom changing the 320px width for wherever your design starts breaking:

@media only screen and (max-width: 320px) {

   body { font-size: 2em; }

}

You commented on Jeff Simpson's post almost 6 years

I found out the solution and it is quit simple:

#map img
{
    max-width : none;
}

I just posted out for other developers.

Thanks for your time ... !

Posts Followed


Following

Followers

  • No Content