Added padding for how-to block

[saragajic11]

*Added padding to how-to block to fix overlapping on tablet devices + added additional padding for desktop devices to match previous design

Resolves: MWPW-134277

Test URLs:

Before: https://stage--dc--adobecom.hlx.page/acrobat/online/word-to-pdf
After: https://mwpw-134277-fix-overlap--dc--adobecom.hlx.page/acrobat/online/word-to-pdf

[aem-code-sync]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

• Re-run PSI Checks

[aem-code-sync]

Page	Scores	Audits	Google
/acrobat/online/word-to-pdf		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 401)

[codecov-commenter]

Codecov Report

Merging #294 (e958987) into stage (3eb40fa) will increase coverage by 0.04%.
Report is 12 commits behind head on stage.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##            stage     #294      +/-   ##
==========================================
+ Coverage   99.46%   99.51%   +0.04%     
==========================================
  Files          26       26              
  Lines        2261     2255       -6     
==========================================
- Hits         2249     2244       -5     
+ Misses         12       11       -1     

Files Changed	Coverage Δ
.../blocks/dc-converter-widget/dc-converter-widget.js	100.00% <100.00%> (ø)
acrobat/scripts/maps/localeMap.js	100.00% <100.00%> (ø)
acrobat/scripts/scripts.js	100.00% <100.00%> (ø)

... and 1 file with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[aem-code-sync]

Page	Scores	Audits	Google
/acrobat/online/word-to-pdf		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 401)

[aem-code-sync]

Page	Scores	Audits	Google
/acrobat/online/word-to-pdf		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 401)

[aem-code-sync]

Page	Scores	Audits	Google
/acrobat/online/word-to-pdf		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 401)

[aem-code-sync]

Page	Scores	Audits	Google
/acrobat/online/word-to-pdf		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 401)

[zagi25]

@saragajic11 This looks good but I just realized that this will affect all of our pages that uses how-to block, so you should target how-to only if it is inside eventwrapper :

.eventwrapper  .how-to-heading { 
    ...
 }

etc.

[aem-code-sync]

Page	Scores	Audits	Google
/acrobat/online/word-to-pdf		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 401)

[zagi25]

If everyone is okay with extra padding on smaller devices, then this is fine by me. Great job @saragajic11 !