Align text inside Div on mobile and desktop using CSS

RichardSa
 
on May 17, 2022 11:27 PM
537 Views

I want to align my texts to the center in laptop and desktop view, but in mobile view I want the texts to align to the left

I tried with this but it did not work. How can this be achieved please?

Here is my HTML and CSS

 CSS

<style type="text/css">
    @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>

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 Machines</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>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on May 18, 2022 02:33 AM
on May 18, 2022 02:35 AM

Hi richardsa,

Please refer below Demo.

As per your requirment the code is working, You just need to change your below CSS.

@media screen and (min-width: 360px) and (max-width:640px)

HTML

<style type="text/css">
    @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 only screen and (min-width: 360px) and (max-width:1920px) {
        #header-write {
            text-align: center;
        }
    }
</style>

<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 Machines</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>

Demo