How to perform text distribution on a line

Asked

Viewed 71 times

1

I have a detail page where the product title when resizing the browser or viewed on a mobile device the text is completely aligned to the left, I would like the alignment to remain but the text to be better distributed, the structure where the title is:

 <div class="one-fourth-pers column-last"><h3 class="entry-title"><?php echo $row_rsProdutos['descricao']; ?></h3></div>

    .one-fourth-pers {
    width: 40.5%;
    float:left; 
    /*max-width: 220px;*/
}

When trying to change the width the entire content is played down. The page can be seen here: Page of Details

css3

2 answers

3


You can use a media-query when the page will be broken into several lines. On your page, there seems to already be a media-query for screens smaller than 767px:

@media screen and (max-width: 767px) {
  // …
}

The problem can be solved by adding a rule like:

@media screen and (max-width: 767px) {
  .one-fourth-pers {
    width: 100%;
  }
}

  • Thanks for the excellent tip @yamadapc, solved my problem.

2

Use the property text-align - MDN.

p {
  padding: 4px 0;
  width: 100%
}

.direita { text-align: right }
.esquerda{ text-align: left  }
.centralizado { text-align:center }
.justificado { text-align: justify }
<p class='direita'><b>A direita:</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et vulputate diam. Fusce placerat magna nec tellus consequat, a fermentum tellus tincidunt. Sed sed pretium mi. Vivamus efficitur consectetur tortor at pharetra. Etiam id rutrum nisi. Ut elementum lorem ultricies ante tincidunt placerat. Aenean eget ex vitae leo consequat volutpat interdum vel sapien. Phasellus vitae mi ipsum.</p>

<p class='esquerda'><b>A esquerda:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et vulputate diam. Fusce placerat magna nec tellus consequat, a fermentum tellus tincidunt. Sed sed pretium mi. Vivamus efficitur consectetur tortor at pharetra. Etiam id rutrum nisi. Ut elementum lorem ultricies ante tincidunt placerat. Aenean eget ex vitae leo consequat volutpat interdum vel sapien. Phasellus vitae mi ipsum.</p>

<p class='centralizado'><b>Centralizado:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et vulputate diam. Fusce placerat magna nec tellus consequat, a fermentum tellus tincidunt. Sed sed pretium mi. Vivamus efficitur consectetur tortor at pharetra. Etiam id rutrum nisi. Ut elementum lorem ultricies ante tincidunt placerat. Aenean eget ex vitae leo consequat volutpat interdum vel sapien. Phasellus vitae mi ipsum.</p>

<p class='justificado'><b>Justificado:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et vulputate diam. Fusce placerat magna nec tellus consequat, a fermentum tellus tincidunt. Sed sed pretium mi. Vivamus efficitur consectetur tortor at pharetra. Etiam id rutrum nisi. Ut elementum lorem ultricies ante tincidunt placerat. Aenean eget ex vitae leo consequat volutpat interdum vel sapien. Phasellus vitae mi ipsum.</p>

  • Thanks for the tip @Renan, thanks really, this will help me a lot.

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.