Map Position Error

[Vicinanza Luigi]

Hi Steven

I have a problem about layout page after update at new wordpress version.

https://www.gretelmap.com/wp/mappe/

The correct layout is Column Filter under “Applica Filtro” and map under “esplora mappa”

What’s happened?

I attached css custom

Thanks for your time
Kind Regards

Luigi

Attachments:

You must be logged in to view attached files.

[Matthew]

Hi there,

Matthew here and I will be assisting you.

Thank you for getting back in touch with us, we do appreciate your time.

Thank you for providing the custom CSS code used, it appears that some of the brackets and syntax was a little off which was essentially causing errors within the CSS code.

With that said, I have correctedthe CSS code to resolve the errors to the best of what I can see how it was orignally created.

Please may you replace your currently CSS code with the below corrected CSS code and confirm if this helps:

p[id^=”wpgmza_filter_”] + div {
   display: inline-block !important;
   max-width: 40%;
   vertical-align: top;
}
.wpgmza_map {
   display: inline-block !important;
   max-width: 100%;
   margin-left: 80px;
   vertical-align: top;
}

@media screen and (min-width: 800px) {
   .elementor-element-49c86f0 > .elementor-widget-container{
      height:1150px !important;
   }
   .elementor-shortcode{
      display:grid;
      grid-template-columns: [first] 250px [all] 800px;
      grid-template-rows: [row1] auto [row2] auto [row3] 300px [row4] auto;
      }
   .elementor-shortcode > a {
      grid-column-start: 2;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 1;
   }
}

@media screen and (min-width: 800px){
   .wpgmza_cat_checkbox_1 {
         color: #74b200;
   }
   .wpgmza_cat_checkbox_holder {
         display: block;
         overflow: auto;
         height: 1500px;
         max-height: 1500px;
         overflow-y: auto;
         padding: 10px;
   }

   .entry-content ul {
         list-style: square;
         padding: 0;
         margin-bottom: 30px; 
   }

   .wpgmza_cat_ul_child {
      color:#7a7a7a;
      
   }

   .wpgmza_cat_checkbox_1 {
      color:#74b200;
   }

   .wpgmza_infowindow_title {
         font-weight: bold;
         text-transform:uppercase;
         color:white;
         background-color: rgba(94,137,0,0.59);
         padding-left: 5px;
   }

   #wpgmza_filter_1 {
      /*  display: none !important; */
   }

   [name="map1"] {
      display:contents !important;
   }

   #wpgmza_filter_6 {
         /*  display: none !important; */
   }

   [name="map6"] {
         display:contents !important;
   }
}

/* CSS PER FORMATTAZIONE CHECKBOX */

/* Customize the label (the container) */

.wpgmza_cat_checkbox_item_holder label {
       padding-left: 0px;
}

li.wpgmza_cat_checkbox_item_holder {
     display: block;
     position: relative;
     padding-left: 30px;
     margin-bottom: 12px;
     cursor: pointer;
     font-size: 15px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}

/* Hide the browser\\'s default checkbox */
li.wpgmza_cat_checkbox_item_holder input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
}

/* Create a custom checkbox */
li.wpgmza_cat_checkbox_item_holder label:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     height: 20px;
     width: 20px;
     background-color: #eee;
     border: 1px solid #ccc;
     cursor: pointer;
}

/* On mouse-over, add a grey background color */
li.wpgmza_cat_checkbox_item_holder:hover > input ~ label:before {
     background-color: #b5e2e1;
     border: 2px solid #2489C5;
}

/* When the checkbox is checked, add a blue background */
li.wpgmza_cat_checkbox_item_holder input:checked ~ label:before {
     background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
li.wpgmza_cat_checkbox_item_holder label:after {
     content: "";
     position: absolute;
     display: none;
}

/* Show the checkmark when checked */
li.wpgmza_cat_checkbox_item_holder input:checked ~ label:after {
     display: block;
}

/* Style the checkmark/indicator */
li.wpgmza_cat_checkbox_item_holder label:after {
     left: 8px;
     top: 4px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}

.wpgmza-directions-buttons i {
       color: yellow;
       cursor: pointer;
       transition: color 0.3s;
}

a {
       color: #74b200;
       font-weight: 400;
}

.wp-caption {
   border: 0px solid #ccc;
}

Once you have replaced the custom CSS code (Maps -> Settings -> Advanced Settings), please may you clear your browser cache and confirm if this helps?

I look forward to your response.

Kindest Regards,
Matthew

[Author]

Posts