Проблема с выравниванием по левому столбцу - только для мобильных устройств - PullRequest
Новая
       13

Проблема с выравниванием по левому столбцу - только для мобильных устройств

0 голосов
/ 08 апреля 2019

Я столкнулся с проблемой выравнивания на iphone, где мой раздел столбца оставлен выравниванием. Он отлично работает на рабочем столе и Android. Я не уверен, в чем проблема. Спасибо 

  .column {
  float: left;
  width: 33%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (max-width:600px) {
  .column {
    float: left;
    width: 33%;
    margin: 0px;
  }
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
<!---- Steps Section ---->
<table border="0" cellspacing="0" cellpadding="0" style="width: 600px; background-color:#ffffff;">
  <tbody>
    <tr>
      <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
        <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
        </h4>
        <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
          <br /> card ready to go.
        </p>
      </td>
      <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
        <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
        </h4>
        <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
          <br /> card ready to go.
        </p>
      </td>
      <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
        <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
        </h4>
        <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
          <br /> card ready to go.
        </p>
      </td>
    </tr>
  </tbody>
</table>

Я пытаюсь настроить мобильность для выравнивания по центру, как это делает рабочий стол. Сейчас справа от всех трех столбцов есть большое серое пространство только для мобильных устройств.

Ответы [ 2 ]

0 голосов
/ 09 апреля 2019

Вот упрощенная версия вашего кода. Я изменил float, width и добавил отображение в ваш column класс.

Обратите внимание, что если вы хотите перезаписать что-либо с помощью медиазапросов и их уже встроенных, вам нужно использовать !important в вашем CSS для этого. 

	.column {
        float: left;
      }
@media only screen and (max-width:600px){
        .column {
          float: none !important;
          width: 100% !important;
	  display:inline-block;
          margin: 0px;
        }
}
<!---- Steps Section ---->      
      <table border="0" cellspacing="0" cellpadding="0" style="max-width: 600px; background-color:#ffffff;">
        <tbody>
          <tr>
            <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
              <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
              </h4>
              <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                <br />
                card ready to go.
              </p>
            </td>
            <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
              <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
              </h4>
              <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                <br />
                card ready to go.
              </p>              
            </td>
            <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
              <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
              </h4>
              <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                <br />
                card ready to go.
              </p>              
            </td>
          </tr>
        </tbody>
      </table>

Или, если вы хотите, чтобы все 3 столбца были одинаковыми по ширине в мобильном телефоне, вы можете использовать следующий код: 

    	.column {
            float: left;
          }
    @media only screen and (max-width:600px){
            .column {
              float: none !important;
              width: 33% !important;
    	  display:inline-block;
              margin: 0px;
            }
    }
    <!---- Steps Section ---->      
          <table border="0" cellspacing="0" cellpadding="0" style="max-width: 600px; background-color:#ffffff;">
            <tbody>
              <tr>
                <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
                  <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
                  </h4>
                  <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                    <br />
                    card ready to go.
                  </p>
                </td>
                <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
                  <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
                  </h4>
                  <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                    <br />
                    card ready to go.
                  </p>              
                </td>
                <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
                  <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
                  </h4>
                  <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                    <br />
                    card ready to go.
                  </p>              
                </td>
              </tr>
            </tbody>
          </table>

Надеюсь, что это ответ, который вы получили после.

0 голосов
/ 08 апреля 2019

Попробуйте это:

@ экран только для мультимедиа и (максимальная ширина: 600 пикселей) { .column {text-align: left! важный;} }

Кроме того, :after не работает в большинстве почтовых клиентов. Этого можно избежать, если вы используете его для основных элементов структуры CSS.

Удачи.

...