abdo refky abdo refky - 3 months ago 7
HTML Question

wordpress text area issue (only affect mobile)

i have a padding problem that only affect mobiles.

enter image description here

the reason for this issue is some how known, but how to fix the the issue without affecting the computers preview.

here is the suspect

.entry-content,
.entry-summary {
margin-top: 20px;
max-width:1000px;
width: 100%;
float: none; /* i don't know if this affect any thing */
**float: none!important;**
**padding-left:150px !important;**
}


here a preview from the desktop so you can understand the reason behind the padding.

enter image description here

it looks like that padding in a general setting or so.
so what can be done to the solve the problem?
re-allocate the padding line to more specific function ?
or something else.

Answer

It seems you identified the problem yourself. The padding is applied in the mobile page.

A fix would be to use a media query to find out if the user is viewing on a desktop. If he is, add the padding to the element.

first remove the padding from the main styling of the element

.entry-content,
  .entry-summary {
    margin-top: 20px;
    max-width:1000px;
    width: 100%;
    float: none; /* i don't know if this affect any thing */
    **float: none!important;**   
  }  

and add something like this to your stylesheet

@media only screen  and (min-width : 1224px) {
  .entry-content, .entry-summary {
    padding-left: 150px;
}

What this does is only applying the padding-left if the screen's width is larger than 1224 pixels (so a desktop, basically).

A better solution though, would be to change the elements so the left-padding is not needed to position the text right. But this is an HTML issue and I don't have enough information to help you with this.

Comments