[wp-trac] [WordPress Trac] #57506: Twenty Twenty-Three: Quote block border issue.

[WordPress Trac]

#57506: Twenty Twenty-Three: Quote block border issue.
------------------------------+-----------------------
 Reporter:  nidhidhandhukiya  |       Owner:  (none)
     Type:  defect (bug)      |      Status:  reopened
 Priority:  normal            |   Milestone:  6.3
Component:  Bundled Theme     |     Version:  6.1.1
 Severity:  normal            |  Resolution:
 Keywords:                    |     Focuses:
------------------------------+-----------------------

Comment (by joysons):

 The CSS code you provided on forum wordpress will work on mobile devices
 with screen widths of 599 pixels or less. It targets the block quote
 element in WordPress and sets its left and right margins to 0, but only
 when the screen size is smaller than 600 pixels.

 Here's an example of how this code would work on a desktop device with a
 screen size greater than 600 pixels:


 {{{
 .wp-block-quote {
     margin-left: 1.5em;
     margin-right: 1.5em;
 }
 }}}


 This code specifies margins of 1.5em on the left and right sides of the
 block quote element.

 However, when viewed on a mobile device with a screen width of 599 pixels
 or less, the following CSS code would take effect:



 {{{
 @media screen and ( max-width: 599px ) {
     .wp-block-quote {
         margin-left: 0;
         margin-right: 0;
     }
 }
 }}}

 This code uses a media query to target smaller screens and specifies
 margins of 0 on the left and right sides of the block quote element. This
 modification makes the block quote element more readable on smaller
 screens and improves its visual impact.

 Overall, using media queries like this can help ensure that your website
 looks good and functions well on devices with different screen sizes and
 resolutions. By specifying different CSS styles for different devices, you
 can create a more responsive and user-friendly
 website[https://a-goodguidenews.blogspot.com/2023/04/quote-block.html .]
 The CSS code, which targets the block quote element in WordPress and sets
 its left and right margins to 0, will work on both desktop and mobile
 devices.

 To give an example, let's say you have a WordPress website with a blog
 post that includes a block quote element. The default CSS styling for the
 block quote element may include margins on its left and right sides. Here
 is an example of the default CSS code for the block quote element:



 {{{
 .wp-block-quote {
     margin-left: 1.5em;
     margin-right: 1.5em;
 }
 }}}

 With this default styling, the block quote element will have margins of
 1.5em on its left and right sides, which may look fine on desktop devices
 but could cause readability issues on smaller mobile screens.

 To modify the block quote element's margins for both desktop and mobile
 devices, you can use the CSS code:



 {{{
 .wp-block-quote {
     margin-left: 0;
     margin-right: 0;
 }
 }}}

 With this CSS code, the block quote element will have no margins on its
 left or right sides, creating a cleaner and more streamlined appearance.
 This modification will be applied to all devices that use the WordPress
 block quote element, including desktop and mobile devices.

 Overall, this modification to the block quote element's CSS code can help
 improve its readability and visual impact on both desktop and mobile
 devices.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/57506#comment:10>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform