Header – Image not aligned in Chrome

Hi @parwaiz-khan

in chrome the header image has an inline style of

display: none !important;

I think this is causing the issue but can’t confirm, as when I remove it in the dom it puts is back immediately.

Hi,

Give your widget a smaller maximum width will fix your issue.
Please use the following in a child theme’s style.css

@media screen and (min-width:980px){
div#black-studio-tinymce-3 {
    max-width: 75% !important;
}
}

Please see my screen-shot.
https://image.prntscr.com/image/b819e6847e1246bda776d5a9e33c7bfa.png

Thank you

• This reply was modified 8 years, 2 months ago by Denzel Chia. Reason: typo error

Hi Denzel and Salsaturation,
Thank you for looking into it.

Denzel, I had applied the following code:

#black-studio-tinymce-3.widget.widget_black_studio_tinymce {
max-width:850px !importnt;
background: #f2eee8 !important;
margin-top: -5px;
margin-bottom: 50px;
}

That had fixed the initial problem. Upon your response, I changed the max-width to %. Same effect – Thank you.

Now, this change is causing problem with the FF and IE. In both of these browsers, the “page.container” (content and both sidebars) dip down by almost 20px ( Chrome and Safari are rendering the page OK).

I am still playing with the css to try to fix it – may be, I should do some thing to target only the FF and IE.

Please let me know if you have any suggestions.

The site, again, is: https://lifevibrant.com

Thank you.

Hi,

It’s showing up properly in my firefox browser.
https://image.prntscr.com/image/69ac70ed87194aff87a9a566a441ae7d.png

Perhaps all you need is to clear your browser history.

Thank you

Hi Denzel,
If you look at the screen-shot and then open the same on Safari or Chrome, you will notice that the “page.container” (content and both sidebars) is down by almost 30px on your screen-shot (in comparison to what you will see on Safari or Chrome).

That is the issue i am trying to fix.

Thanks again for looking into it.

Hi,

When view in chrome browser. There is a chrome class name in HTML body tag, you can use it to write css to target only chrome browser.

Thank you

Hi Denzel,

The problem is with the FF and IE – Chrome is OK.

In the IE and FF the“page.container” (content and both sidebars) is down by almost 30px – Safari and Chrome both are rendering the page as intended.

The subject of this support request is still the “Header – Image not aligned in Chrome” – but, thanks to your suggestion that problem is fixed. Now, that fix is resulting in this behavior in the IE and FF.

I tried to target some elements (.container-inner) – not doing the needed correction. I think. the elements that need to be targeted (only in FF and IE) are the “content” and the two sidebars.

Thank you very for all your help and support.

You are welcome.
Thank you

Hi Denzel,
Seems you didn’t read my reply/request all the way – the fix that corrected the previous issue has created this new problem that I have mentioned.

Any idea how to correct this anomaly in FF and IE?

Please read my previous two replies.

Thank you.

Hi Denzel,

I finally applied the browser specific hacks to pull up content and the sidebars.
Here is the css that I applied – in case other users may have encountered the same issues:

/* Header-Ad section style mods */
#black-studio-tinymce-3 {
/* max-width:85% !important;
display:inline-block; */
float:right;
background: #f2eee8 !important;
margin-top: -5px;
margin-bottom: 50px;
}
@-moz-document url-prefix() {
.content, .s1, .s2 {
margin-top:-28px;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.content, .s1, .s2 {
margin-top:-28px;
}
}

Now, all the 4 browser are showing it OK (couldn’t test it on edge, though). The website (for those who may want to check out ) is:

https://lifevibrant.com

[I am marking the issue Resolved.]

Thank you.