I'd like to have the flexbox cards view horizontally and vertically on any screen. I've done it like this and successfully figured out how to display the cards horizontally, but when you try viewing it on a mobile device or smaller screen, the cards remain horizontal. I tried using bootstrap card-deck that didn't help. When i used col d-flex justify-content-center, this allowed the cards to resize but they still don't stack vertically. In other instances i have just used card-deck like here and and its worked fine. Please any suggestions.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon"type="image/ico" href="/images/favicon/favicon.ico"/>
<meta name="viewport" content="width=device-width initial-scale=1" />
<environment include="Development">
<link href="~/lib/bootstrap//css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
asp-suppress-fallback-integrity="true" >
</environment>
<link href="~/css/site.css" rel="stylesheet" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<a class="navbar-brand" asp-action="index" asp-controller="home">
<img src="~/images/employees.png" height="30" width="30" />
</a>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://digitalconsulting.cc/" target="_blank" >Digital Consulting.cc</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="nav-item">
<a asp-action="index" asp-controller="home" class="nav-link">List</a>
</li>
<li class="nav-item">
<a asp-action="create" asp-controller="home" class="nav-link">Create</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tools <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Software</li>
<li>Security</li>
<li>Mobile</li>
</ul>
</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<div>
#RenderBody()
</div>
#if (IsSectionDefined("Scripts"))
{
#RenderSection("Scripts", required: true)
}
</div>
</body>
</html>
Index.cshtml
#model IEnumerable<Employee>
#{
ViewBag.Title = "Employee List";
}
<!-- div class="col d-flex justify-content-center"> -->
<div class="card-deck">
#foreach (var employee in Model)
{
<div class="card m-3">
<div class="card-header">
<h3>#employee.Name</h3>
</div>
<img class="card-img-top" src="~/images/noimage.jpg"
asp-append-version="true" />
<div class="card-footer text-center">
<a asp-controller="home" asp-action="details" asp-route-id="#employee.Id"
class="btn btn-primary m-1">View</a>
Edit
Delete
</div>
</div>
}
</div>
Found this code on W3 Schools.
Swap out:
<div class="card-deck">
#foreach (var employee in Model)
{
<div class="card m-3">
With this code:
<div class="row row-cols-1 row-cols-md-3 g-4">
#foreach (var employee in Model)
{
<div class="card h-100">
Related
Firstly i tried to do margin:0, and padding:0 for body element. But it didn't work. I inspected it to see what's going on google developer tools. I saw my .container-fluid class which has some bootstrap properties by default, has padding in left, and right. So when i write in developer tools; .container-fluid{ padding:0} it works, it deletes that free space. But when I do it in my css file, it doesn't work. Since I didn't want to use !important keyword, cause I think It must have worked...So I need your help, what's my mistake? Thanks.
.container-fluid {
padding: 0;
}
.title-image {
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Bootcamp Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1>Download the best bootcamp, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</section>
</body>
</html>
Just take the navbar out of the container...
<section>
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<!-- Title -->
<div class="row g-0">
<div class="col-lg-6">
<!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1>Download the best bootcamp, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
Demo
If you also want to remove left/right space from the content area, use p-0 on the container, and g-0 (no-gutters) on the row (otherwise you'll get undesired horizontal scrolling).
Also see: Make a bootstrap 4 container-fluid go full bleed to edge of browser window
In this case, it might be best to just use !important. Or, if you really don't want to, you can make the selector more specific (and thus more "important" that the bootstrap one) by prepending body to it. For example:
body .container-fluid {
padding: 0;
}
.title-image {
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Bootcamp Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row g-0">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1>Download the best bootcamp, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</section>
</body>
</html>
Note that to prevent horizontal scrolling, I also had to add a .g-0 class to the .row element.
I am creating a sort of website portfolio with the Python flask framework. The html page looks fine in chrome even with the mobile preview. But the bootstrap does not seem to be working when I view the page on my iphone 7plus. The list items and the image classes do not seem to be working. What seems to be the problem here? Thanks
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<title>Talal Najam</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark pl-400">
<div class="container">
<a class="navbar-brand" href="#">Talal Najam</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://github.com/mistat44" target="_blank">Github</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<ul class="navbar-nav mr-auto">
<li class="nav-item nav-link disabled">
<del>Dev Info</del>
</li>
</ul>
</form>
</div>
</div>
</nav>
<div class="fake-body">
<div class="container">
<div class="text-center mb-3 bodbot">
<img class="rounded-circle img-fluid" height="300px" width="200px" src="{{ url_for('static', filename="img/default.jpg") }}">
<h1>Talal Najam</h1>
</div>
<div class="row">
<!-- Not So Nerd Stuff -->
<div class="col-md-6 col-sm-12 main-content">
<div id="textt-body" class="text-body">
<div class="text-inner projects">
<h2 style="padding-bottom: 0.4rem">Projects</h2>
<ul class="list-group dec text-justify">
<li class="list-group-item pl-3 pr-3"><a target="_blank" class="nodec" href="https://github.com/mistat44/sentiment-analysis-using-machine-learning">Sentiment Analysis using supervised Machine Learning</a></li>
<li class="list-group-item pl-3 pr-3"><a target="_blank" class="nodec" href="https://github.com/mistat44/dota2stats">Dota 2 Stats tracking Flask Web Application</a></li>
<li class="list-group-item pl-3 pr-3"><a target="_blank" class="nodec" href="https://github.com/mistat44/twitch-chatbot">Twitch Chat Bot</a></li>
<li class="list-group-item pl-3 pr-3"><a target="_blank" class="nodec" href="https://github.com/mistat44/dash_app">Dash Live Sentiment Analysis</a></li>
<li class="list-group-item pl-3 pr-3"><a target="_blank" class="nodec" href="https://github.com/mistat44/dash_app">Slack Joke Bot</a></li>
</ul>
</div>
</div>
I just can't figure out why my dropdown button is not working. I can't see any errors in the console, I have tried with calling css files in the head element and at the end of the body, that hasn't changed anything. This is my navigation menu with a dropdown button in it:
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
</div>
<!-- Theme option content -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="changeTheme(1)">Flatly</a></li>
<li><a ng-click="changeTheme(2)">United</a></li>
<li><a ng-click="changeTheme(3)">Cerulean</a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Theme option content -->
</div>
<!-- Container -->
</nav>
And I have included all the files needed at the bottom:
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="css/bootstrap.{{theme}}.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="css/spinner.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<!-- scripts -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- load angular libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<!-- APP scripts -->
<script src="app/hotels/hotels.js"></script>
Because you are missing the bootstrap.js
take a look with your nav
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
</div>
<!-- Theme option content -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="changeTheme(1)">Flatly</a>
</li>
<li><a ng-click="changeTheme(2)">United</a>
</li>
<li><a ng-click="changeTheme(3)">Cerulean</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Theme option content -->
</div>
<!-- Container -->
</nav>
I am having some issues with implementing bootstrap in my asp page. How do I get the ContentPlaceHolder of my asp master page to the right of my Navbar?
Master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebApplication1.Main" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://getbootstrap.com/examples/dashboard/#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
<li>More navigation</li>
</ul>
</div>
</div>
</div>
<div class="Container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
This puts the content under the navigation bar, which will look like this:
I need to know where to implement ContentPlaceHolder.
Wrap your <div class="Container"> into the above <div class="container-fluid">
Remove also the col-sm-offset-X from the ContentPlaceHolder1 if needed.
Here is a working DEMO
Can you please take a look at following LINK and let me know why the map is not acting responsive? I also have some issue with correct positioning and I appreciate if you can help me to fit the map correctly in page?
Here is my CSS and Html as well,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- JS Libs -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Brand</a>
<div class="nav-collapse collapse" id="spanClasses">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="map">
<div id="map_canvas"></div>
</div>
and css:
body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;}
The map is not an image, it will not downsize while you downsize your browser