Weird behaviour in localhost

Hi,
I migrated the webpage I am working on on my localhost server on my laptop
and I am experienciang some weird behaviour in the way a gallery is displayed
Basically the original gallery outline is ‘Simple Portfolio’ and in the original version on my usual hostimg server is shown with 3 columns.
In my localhost instead it is displayed in just one column, with every image in a single row, so to speak.
Also, the image captions for each of the images do not respect a css code I had used in the original version in order to show the caption in a different way that the default behaviour.
By inspecting the code with the firefox inspector, I can see that in the localhost installed version, part of the coding related to the gallery isn’t shown, and the css code stops to some Elementor classes, so the css that I had added to change the behaviour
(and more from the gallery’ css) doesn’t appear at all.
And this is strange to me.
For example: In my hosting provider version of the website
the HTML code of this portion of the gallery shows as:

…
<figcaption class=”fg-caption”
<div class=”fg-caption-inner”>
<div class=”fg-caption-title”>Proyecto Plenitud</div>
<div class=”fg-caption-desc”>Plan director para una rustica finca de 2.2 Ha</div>
</div>
</figcaption>

And the corresponding css code is:

element {
}
.foogallery.fg-caption-always .fg-item.fg-loaded .fg-caption {
left: 0;
bottom: 0;
transition-timing-function: ease;
transition-duration: 300ms;
transition-property: visibility, opacity;
visibility: visible;
opacity: 1;
}

.foogallery.fg-simple_portfolio .fg-item-inner .fg-caption {
visibility: visible;
opacity: 1;
font-size: 13px;
position: relative;
display: block;
top: auto;
bottom: auto;
left: auto;
right: auto;
width: 100%;
height: 100%;
text-transform: none;
transform: none;
transition: none;
transition-property: none;
transition-duration: 0s;
transition-timing-function: ease;
background-color: transparent;
border-style: solid;
border-color: transparent;
text-align: left;
}

.fg-simple_portfolio.fg-transparent .fg-caption {
color: #7f7f7f;
}

.foogallery.fg-caption-always .fg-caption {
text-align: left;
}

.fg-simple_portfolio .fg-caption {
border-width: 0;
}

.foogallery .fg-caption {
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 8;
width: 100%;
max-height: 100%;
overflow: hidden;
font-family: -apple-system,system-ui,BlinkMacSystemFont,”Segoe UI”,Roboto,”Helvetica Neue”,Arial,sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.3;
border: none;
border-top-color: currentcolor;
border-top-style: none;
border-top-width: medium;
border-right-color: currentcolor;
border-right-style: none;
border-right-width: medium;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: medium;
border-left-color: currentcolor;
border-left-style: none;
border-left-width: medium;
text-align: center;
cursor: pointer;
margin: 0;
}

.foogallery .fg-caption {
background-color: rgba(0,0,0,0.6);
color: #fff;
}

.elementor *, .elementor ::after, .elementor ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.foogallery, .foogallery * {
box-sizing: border-box;
}

figcaption, figure, main {
display: block;
}

*, ::before, ::after {
box-sizing: inherit;
}

.fg-simple_portfolio.fg-transparent .fg-item-inner {
color: #333;
}

.foogallery .fg-loaded .fg-item-inner {
visibility: visible;
}

.foogallery .fg-item-inner {
visibility: hidden;
}

.foogallery {
font-family: -apple-system,system-ui,BlinkMacSystemFont,”Segoe UI”,Roboto,”Helvetica Neue”,Arial,sans-serif;
line-height: 0;
font-size: 0;
}

.elementor-element {
–widgets-spacing: 18px;
}

…. (more elementor’s css)

This last line is when the Elementor code begins

However in my localhost website, although the same HTML code as above is present, all this css part is missing and the first element of css code that is on display in the inspector windows for this HTML code is:

element {
}
.elementor *, .elementor ::after, .elementor ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

figcaption, figure, main {
display: block;
}

*, ::after, ::before {
box-sizing: inherit;
}

.elementor-element {
–widgets-spacing: 18px;
}

Any idea about what may be causimg this in my localhost? (and how to fix it!)

• This topic was modified 2 years, 4 months ago by sinergyinaction.
• This topic was modified 2 years, 4 months ago by sinergyinaction.
• This topic was modified 2 years, 4 months ago by sinergyinaction.
• This topic was modified 2 years, 4 months ago by sinergyinaction.