Skip to:

Opened 19 months ago

Last modified 8 months ago

#8662 new defect (bug)

white space found in responsive

Reported by: kajalgohel's profile kajalgohel Owned by: johnjamesjacoby's profile johnjamesjacoby
Milestone: Sites Priority: normal
Severity: normal Version:
Component: Sites Keywords: needs-patch has-screenshots


In responsive (768px and below), white space found in the right side of below page.

for better understanding I provide the screenshot.

Attachments (3)

Screenshot 2022-03-21 at 3.07.02 PM.png (508.9 KB) - added by kajalgohel 19 months ago.
Screenshot at Mar 22 11-08-28.png (271.4 KB) - added by aezazshekh 19 months ago.
After adding the solution, now the page design looks like this
Download · (529.3 KB) - added by hilayt24 19 months ago.
After the CSS modification

Download all attachments as: .zip

Change History (7)

#1 @kajalgohel
19 months ago

  • Keywords has-screenshots added

#2 @aezazshekh
19 months ago

Hello @kajalgohel

Adding the below CSS code to this file will solve the design issue.

file-path => /wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css

@media screen and ( max-width: 782px ) { 
     .syntaxhighlighter {
          width: auto !important;

Than you !

19 months ago

After adding the solution, now the page design looks like this

#3 @hilayt24
19 months ago

Hello @kajalgohel and @aezazshekh for the contribution, but I think instead of applying the new CSS we can change the existing CSS.

.syntaxhighlighter {
    max-width: 100%;
    margin: 1em 0 1em 0 !important;
    position: relative !important;
    overflow: auto !important;
    overflow-y: hidden !important;
    font-size: 1em !important;
    padding: 0.5em 1em !important;

19 months ago

After the CSS modification

#4 @imath
8 months ago

  • Milestone changed from Awaiting Review to Sites
Note: See TracTickets for help on using tickets.