I have some problems customizing InfoWindow in Google Maps.
Here is a picture of what I have done so far:
My problem is I cannot Make the window content wider, I want to shrink the margins on the right.
Also, is there anyway to access the "close" button to customise it?
.cadre .title {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
font-weight: 400;
padding: 10px;
margin: 0;
border-radius: 2px 2px 0 0;
width: 100%;
}
.cadre {
margin-bottom: 10px;
left: 0 !important;
right: 0 !important;
}
.cadre .im {
float: left;
height: 100px;
width: 120px;
margin: 0 5px 5px 5px;
margin-top: 5px;
}
.cadre .texte {
text-align: center;
}
Related
As the title says, I'm having issues with the hover action. Not sure what's causing it.
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header li a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I'm working on my first website for my portfolio. I've done all the markup for the first page and I've started styling it, but I'm stuck on the navigation bar. It's only the hover action that isn't working as I want it to. I'm trying to make it so that there's a rounded box behind it in a darker shade than the navigation bar, but the hover effect moves the text to the right a little bit. I read somewhere that it could be padding but I'm not entirely sure.
Appreciate any help, I'm new to all this.
Alex
The tag in the default state doesn't have the same values of padding and font-size of when it's on hover.
Try correct your code like this:
header a{
color: white;
text-decoration: none;
font-size: 21px;
padding: 8px;
height: 5px;
}
Seems you are using header a for simple action and header li a for hovering kindly try to replace your code with the following, If there is any question feel free to ask, if it solves your problem , then vote up to acknowledge our combine effort.
Thank You.
Best Wishes,
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I tried the following css to handle the safe area in Iphone X. It works fine, but while scrolling back to top, it shows web content under the status bar:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
width: 100%;
padding-top: 50px;
padding-bottom: 58px;
background: #fff;
}
header {
position: fixed;
top: 0;
width: 100%;
display: block !important;
background: #FFF;
padding: 0;
padding-top: 5px;
direction: ltr;
height: 45px;
box-shadow: 1px 0 5px 0 #444;
z-index: 1040;
transition: top 0.2s ease-in-out;
}
#supports(margin: max(0px)) {
body {
margin-top: max(30px, env(safe-area-inset-top));
margin-bottom: max(15px, env(safe-area-inset-bottom));
}
}
#supports(top: max(0px)) {
header {
top: max(30px, env(safe-area-inset-top));
}
}
Any idea how to fix the issue?
I am coding a button with html5 and css3. Here are how it looks in different sizes:
You can see the icons are not in the middle. I know why it happens. But how can I set the icons in middle? Here is my code:
<i class="icon">a</i><span>start</span>
CSS:
.blue-pill {
display: block;
text-decoration: none;
width: 135px;
height: 50px;
margin-bottom: 15px;
position: relative;
background-color: #002032;
border: none;
color: #FFF;
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
padding: 0;
border-radius: 50px;
cursor: pointer;
z-index: 2;
text-align: center;
line-height: 50px;
-webkit-box-shadow: 0px 5px 0px #1488ae;
-moz-box-shadow: 0px 5px 0px #1488ae;
box-shadow: 0px 5px 0px #1488ae;
}
.blue-pill .icon {
display: inline-block;
margin: 0 5px;
color: #e57125;
font-size: 20px;
}
.blue-pill span {
display: inline-block;
}
.blue-pill.centered {
margin-left: auto;
margin-right: auto;
}
.blue-pill.inline {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
I am using icon fonts for icons. Here is what I want:
add vertical-align:middle to .blue-pill .icon and .blue-pill span
Example
I hope you all are doing great.
I just wanted to see how my website would look if I moved logo to the right, and the search bar to the left. I edited the style.css to make the logo float right, but when doing that with the search bar, nothing moves ,I tried "center"-ing it and putting it to the "left" but it won't work. Here have a look at some of the code :
/* Horizontal Category List (Default & Flyout) */
#SideCategoryList h2 {
display: block;
border-bottom: #ACA9A9 dashed 1px;
}
/* Logo */
#Logo {
float: left;
margin-bottom: 20px;
}
#Logo h1 {
font-size: 63px;
font-weight: normal !important;
letter-spacing: -1px;
text-transform: none;
padding: 0;
margin: 0 0 15px;
font-family: 'Sacramento', Arial, Sans-Serif;
letter-spacing: normal;
}
#Logo #LogoImage {
}
/* Top Search Form */
#SearchForm{
margin: 15px 0 0 0;
padding: 0px;
width: auto;
position: relative;
border-bottom: 1px dashed #ACA9A9;
overflow: auto;
float: center;
}
#SearchForm form {
padding: 0;
margin: 0;
}
#SearchForm label {
display: none;
}
#SearchForm input {
color: #aca9a9;
width: 145px;
height: 18px;
font-size: 0.8em;
font-weight: 400;
text-transform: uppercase;
padding: 2px 3px 2px 3px;
I am trying to customize a survey we created through Fluidsurvey. The CSS section has the ff code for all pages, which shows the progress bar at the top right portion of the page. However we would like to move it at the bottom of each page:
html, body {
background-color: #fff;
margin:10px 0 0 0;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
}
#survey .survey-progress-outer {
display: block;
border: 1px solid #999;
width: 150px;
height: 15px !important;
background-color: #fff;
font-size: 75%;
margin-top: 6px;
margin-right: 15px;
overflow: hidden;
line-height: 18px;
color: #000;
}
#survey .header-progress-container{
position: relative;
}
#survey .survey-progress-inner {
background-color: #ABDCED;
}
#survey, #890 {
width: 800px;
margin: 0 auto;
}
#footer {
text-align: right;
}
#survey {
border: 1px solid #333333;
}
#survey .header-progress-container {
background-color: #3B5998;
color: #fff;
padding: 5px;
}
#survey-form {
padding: 20px;
}
#survey .question-body {
padding: 5px;
background-color: #EDEFF4;
margin: 5px 0;
}
#survey .buttons input {
background-color: #5B74A8;
border: 1px solid #333;
color: #fff;
padding: 2px 5px;
font-weight: bold;
}
I tried inserting the following in the .survey-progress-outer section:
position: relative;
bottom: 0%;
right: 0%;
but did not produce the desired effect. Kindly help. Thanks.
To achieve re-locating the progress bar to another location in the survey, a custom javascript must be used (possible through a FluidSurveys JavaScript advanced question, or by pasting script html into a question description or something).
You'll want to remove the existing progress bar element and move it to the bottom of the #survey element, but retaining the same structure for CSS purposes means having to create a second .survey-header element to contain your relocated progress bar. This is to ensure existing CSS and JavaScript can still find the progress bar.
var p = $('.survey-progress-outer').detach();
$('<div class="survey-header"/>').append(p).appendTo('#survey');