JustBlossom JustBlossom - 6 months ago 18
Javascript Question

How to dynamically change element alignment?

What I am trying to do:

I am creating a page footer using html, css, and bootstrap. When the page is open on a desktop, it looks like this (which is what I want):

enter image description here

But when the web page reaches the minimum width, it looks like this:
enter image description here

However, I would like it to look something like this when the web page has been decreased to the minimum width:

enter image description here

Problem/ What I tried:

So, I am have trouble with two things.

Problem 1: I can't seem to find a solution where I can get both the images and the text to center once there is no more room for them to be side by side.

Problem 2: I can't find a solution where I keep the size of the black jumbotron the same and that keeps the text from flowing out the bottom of it.

I tried creating a table (with text in place of the images to test it). I thought if I put the elements in a table with the images centered in the far left column and the text centered in the far left column, then, when the table got small enough, the columns would stack and the elements would be centered. But I couldn't get that to work.

I also tried adding two smaller jumbotrons within the larger one. One that holds the images and another that holds the text. But I still couldn't get the images to center properly, and there is still an issue with the text flowing out the bottom of the black jumbotron.

What am I doing wrong, and how can I do what I am trying to do using CSS and HTML? If Javascript is the only solution, I don't mind trying that, I just don't use it much.

Code:


Here is my HTML:

<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">&copy; 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>


Here is my CSS:

#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}

#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}

#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}

#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}

#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}

Answer

You can do this with bootstrap grid and media queries DEMO

@media(min-width: 768px) {
  .custom-row p {
    text-align: right;
  }
}
@media(max-width: 768px) {
  .custom-row {
    text-align: center;
  }
}