Best Answer

Edit margins on homepage via CSS

  • 23 September 2021
  • 4 replies
  • 328 views
M
Rank
Userlevel 5
Badge +1

I’ve tried everything on my end but can’t seem to figure out how to solve this custom css issue and was hoping someone else here might have figured out a solution?

We have a custom home page with the page title/description graphic (the one that shows an icon, page title, and description text in a white background just below the header) hidden via a custom style. Below that, we have a logo with a margin-top style assigned with a negative value to get the logo to be a little higher on the page. Without the margin-top: -50px assigned there is a big gap between the logo and the header.

This works perfectly in Chrome/Edge (I blurred out our logo but the placement is right):

But Safari seems to ignore it completely (see below). I’ve Googled the heck out of this but cannot figure out a workaround. Any css gurus have any ideas? I’ve tried using padding, margin, etc. in all sorts of ways to no avail. Notice the large gap between the header and the logo - this happens only in Safari:

 

icon

Best answer by nick.tosto 23 September 2021, 17:38

View original

4 replies

N
Rank
Userlevel 6
Badge +1

Can you share the HTML/CSS you’ve been using so far?

M
Rank
Userlevel 5
Badge +1

Thanks @nick.tosto . This page was developed by a vendor recommended to us and they have ghosted us since : (

/* Pushes page up to reduce space taken up by header */
#doc-page-73{
    margin: -100px 0px 0px 0px;
}

If you would be willing, I’d be happy to get you a login to our LMS if you want to take a look. Just let me know.

That -100px value seems to be ignored by Safari.

N
Rank
Userlevel 6
Badge +1

It looks like Chrome sees the #doc-page-73 element as a block element while safari sees it as inline. 

if you add:

display: block;

 to your above CSS does it fix it? it worked for me in the inspector but I can’t test in your custom styles area.

Since Chrome and FF have it as display:block already, I’m not too worried about it causing unintended issues.

 

 

M
Rank
Userlevel 5
Badge +1

@nick.tosto that did it! THANK YOU! Really appreciate the help with this and had just about given up before posting here. Thanks again!

Reply


Terms & ConditionsCookie settings