abdo refky abdo refky - 3 months ago 16
CSS Question

wordpress blockquote not working on mobile

welcome.
i am using blockquote on my website, and it's working fine with computers.
but when it come to mobiles, there is a huge issue

enter image description here

here is my blockquote setting :




blockquote p {
font-family: "Playfair Display", serif;
color:#000000;
margin-right:250px;
margin-left:150px;
padding:25px;
font-size: 14px;
line-height: 1.3421052631;
margin-bottom: 51px;
background:#e9eff3;
border-left-color:#87a6bc;
border-left-style:solid;
border-left-width:2px;
border-right-color:#87a6bc;
border-right-style:solid;
border-right-width:2px;
border-bottom-color:#87a6bc;
border-bottom-style:solid;
border-bottom-width:2px;
border-top-color:#87a6bc;
border-top-style:solid;
border-top-width:2px;
}


i think that the problem is very clear from the above description.
but feel free to test by your self wwww.abdorefky.com

Answer

For what I seen the problem is in the mediaquery:

blockquote p {
    font-size: 1em; /* I recommend you to put 1em instead of 34px */
    font-weight: 400;
    line-height: 1;
    margin-bottom: 34px;
    margin-left: 0;  /* add this */
    margin-right: 0; /* add this */
}

if you add the margin-leftand margin-right to the mediaquery it should work