An issue adding text-align:center on small-12 class

0 Views

I’m having trouble on a clients website.

In the header, I have their address and social media icons. Everything is the way they want it until the width starts to shrink to more of a mobile view. I’ve been trying to change the text-align of .social and .address from right to center when the small-12 grid size kicks in. However, for all my efforts, it either stays with one or the other and doesn’t switch when the grid system switches.

Read More

I’ve deleted my efforts currently in hopes that someone can help me with a better implementation method.

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. You can use media-queries. Look them up here – https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

    Add the following CSS style to your website (either in the app.css file or any other file that you include in your target page.)

    .social-icons{
    float:right;
}

@media (max-width: 600px) {
  .social-icons {
    float: left;
  }
}

    The above CSS would float any element with class .social-icons to right by default.
    In case the website is being viewed on a media screen which has a screen width less than 600px, would float it left.