question

Donald-0878 avatar image
0 Votes"
Donald-0878 asked LanHuang-MSFT commented

Aligning Texts in mobile and laptop view

I want to align my texts to the center in laptop/desktop screen, and align same texts to the left in mobile screen
I tried this but it did not work, can anybody help me out?

HTML

 <div class="container" id="header-write" style="margin-top: 3%; padding: 10px; margin-top: 9%;">
                                 <span style="color: #ff8d01; font-family: 'Museo Sans Rounded 900', sans-serif; font-size: 8.9vmin; top: 9%; top: 9%; font-weight: 900;">Modern Tools</span>
                                 <span style="color: #eeeeee; font-family: 'Museo Sans Rounded 900', sans-serif; font-size: 8.9vmin; top: 9%; font-weight: 900;">&nbsp;for the Best Designers in town</span>
                                 <br />
                                 <br />
                                 <p id="boldhead" style="top: 6%; color: #eeeeee;">Design, Sew, and mend with our sophisticated machines </p>
                             </div>


CSS

 <style>
  @media (min-width:320px) {
               #header-write {
                    text-align: left;
                }
               #boldhead {
                   text-align: left;
               }
         }
  @media (min-width:481px) {
                #header-write {
                    text-align: left;
                }
                #boldhead {
                     text-align: left;
                }
         }
    
   @media screen and (min-width: 360px) and (max-width:640px) {
             #header-write{
                 text-align: center;
             }
         }
    
 </style>


dotnet-aspnet-generaldotnet-aspnet-webformsdotnet-aspnet-webpages
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @Donald-0878,

I tried this but it did not work,

I tried your code and found no problem.Maybe you can provide a screenshot of the run.
Note: Only works if the screen is the width you set.
Best regards,
Lan Huang
1 Vote 1 ·

0 Answers