Very long headings doesn't look properly on Chrome & Firefox for Ubuntu 17

[badersur]

example heading: https://www.microsoft.com/en-us/sql-server/developer-get-started/csharp/ubuntu/step/2.html#step-22-create-a-c-app-that-connects-to-sql-server-using-the-entity-framework-core-orm-in-net-core

My screen's resolution is 1366 x 768 and I think it's 15".

The issue seems to be in large screens because when I open Chrome DevTool I didn't notice this!

[LuisBosquez]

Hi Bader Nasser Al-Hashmi (@badersur) can you include a screenshot? I have tried on both my desktop (low-res) and my mac (hi-res) and I'm not sure what to look for.

[badersur]

Hi Luis Bosquez (@LuisBosquez). Sorry about this. Maybe the better description of the issue is: "some text goes to next line and kinda become transparent".

Now I remember why I cloned the repo. & tested it locally! I was planning to include a screenshot & try to fix :/

I see this on Chrome:

And when I press (Ctrl + +)

[badersur]

Hi Luis Bosquez (@LuisBosquez) It seems the issue is because of box-shadow: inset 0 $padding-title * 3 0 $color-secondary; inside the _page-steps.scss

I removed box-shadow: inset 0 3rem 0 #036CBF; from sql-page_steps-block class, and added these:

.sql-page_steps-title {
  ....
  background-color: #036CBF;
  margin-right: -5vw;
  padding-right: 2rem;
}

to .sql-page_steps-title class using Chrome DevTools and it looks fine but I couldn't test it locally using Jekyll because I don't know how to work with scss files and adding these to _page-steps.scss didn't help because the site uses https://sqlchoice.azurewebsites.net/en-us/sql-server/developer-get-started/assets/main.css