Inline element css

[Symbiosis]

Hi there,

I have a few issues that need your support please.

1.) the margins of the text displaying only on desktop needs to be adjusted. I’ve checked on the browser if I change the margin it moved to the proper location. Pls see the screenshot.

So I added the inline element css in the column 2>text>customize>element css>

@media only screen and (min-width: 1025px){
$el.x-text{
margin: 6.5em 1em 0em 1em;
}
}

While I added this element, the content margin has changed accordingly in the Pro builder.

But it failed to show on the browser when I used the Responsive Design Mode .

What is the problem here?

2.) Unidentifiable gap

There is a gap between section 4 and 5 as seen in blue drawn line area on top of the section 5.

Can you help to remove this blue drawn area on mobile phone screen please? I don’t know what it is as the Pro builder can’t identify it for me.

Thanks

[tristup]

Hi @Symbiosis,

Thanks for reaching out.
Sometimes the only screenshot doesn’t help us to recognize the issue you are having. I have also tried the URL listed in your Themeco Account Dashboard but didn’t find the issue you described. Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Symbiosis]

Hi @tristup,

As requested the credential has been added in the secure note. I’ve checked the username and password it logged in to the dashboard.

Thanks

[ruenel]

Hello @Symbiosis,

Please double-check each of your elements. I can see that you have added inline element CSS and it is broken. You have missed closing the @media blocks.

The @media CSS block should be closed like this ALWAYS to prevent any conflict:

@media(max-width: 767px){
  .element-class {
     /* your styleing here */
  }
}

Kindly let us know how it goes.

[Symbiosis]

Hi @ruenel,

Thanks, the screen was small that I couldn’t see all coding. But after fixing with your recommendation the problems are still there.

Kindly check.

Thank you.

[tristup]

Hi @Symbiosis,

I have checked and found that the margin-bottom value is the reason behind the white space you marked in the screenshot. Please find the screenshot describing the settings. And regarding the Element CSS, I am not able to find the issue you described after you modified the CSS as per the direction given by my colleague. I would suggest you check once by clearing all types of cache and in incognito/private mode of the browser.

Thanks

[Symbiosis]

Hi @tristup ,

Thanks that explained.

I still have my previous issue though I seem not be able to fix it to what I like to see on the big screen.

I added the inline element css in the column 2>text>customize>element css>

@media only screen and (min-width: 1025px){
$el.x-text {
margin: 5.5em 1em 0em 2.5em;
}
}

The Pro dashboard has changed it but I can’t see on the browser. I’ve cleared the cache.
I also tried to change the text top margin of the next row but failed to do so on the browser although I saw it changed in the Pro dashboard.

I still put it under construction. You might need to login to check it out.

Thank you.

[tristup]

Hi @Symbiosis,

It seems that the 3rd party plugin SG Optimizer might be the cause behind the issue, I would suggest you deactivate it temporarily and check if the issue still exists or not. If that issue not exists I would suggest you report the plugin author on this, if you need to use the said plugin.

Thanks

[Symbiosis]

Hi @tristup,

I deactivated/deleted the said plugin as you recommended and I checked on the incognito browser, cleared the cache, the issue is still there. I’ve just tried amending margin top of the text in different section it didn’t work either.

Yesterday, before I sent you guys a ticket, I amended box-shadow in the header bar, I amended the box-shadow in the inline element css and it worked nicely. No problem there.

What would might be the issue here?

Thanks

[tristup]

Hi @Symbiosis,

I have checked it again and found that the changed CSS code is not reflecting at the frontend. I would suggest you please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Symbiosis]

Hi @tristup,

Thank you. I’ve updated you the credentials and the link to the dev website. Your team should be able to access it.
Thanks once again.

[marc_a]

Hi @Symbiosis,

I just check your staging area and it seems some of your sections have a broken CSS code. I suggest that you delete the section one by one to find the culprit because when I tried to delete all the sections except for the section with a question, the CSS code is now visible. Please see the secure note for more information.

Hope that helps.

Thank you.