CODEWITHSUNDEEP
htmlcss
Mikkel
Mikkel

Reputation: 512

Image to the right on desktop, centered on mobile

I am making a website with bootstrap. In my jumbotron, I have some text to the left, and an image to the right. On mobile, the image appears on the top instead.

How it looks on desktop:
enter image description here

How it looks on mobile:
enter image description here
The problem is, on mobile, it would be nicer if the image was centered, instead of floated to the right. Is that possible?

HTML:

<div class="jumbotron">
  <div class="container" id="main">

    <div class="img"
        <p id="pic"><img id="pic" src="http://cube.crider.co.uk/visualcube.php?fmt=png&amp;size=800&amp;bg=t&amp;alg=F2%20D2%20L2%20F2%20L2%20F%20U2%20R2%20L%20U%27%20B%20D%27%20F%27%20U2%20L%20D2%20L2%20F2" width="300px" height="300px"></p> 
    </div>

    <h1>Example </h1>
    <p>Example Example Example Example Example Example Example</p>
    <p>Example Example Example Example Example Example Example</p>
    <p>Example Example Example Example Example Example Example</p>

  </div>
</div>

CSS:

.img{
  float: right;
  margin-right: 40px;
  margin-bottom: 20px;
  display: inline;
}

Example website

Upvotes: 5

Views: 5602

Answers (2)

Abdul Manan
Abdul Manan

Reputation: 2375

first enclose your text in <div>:

<div id="textwithimg">
    <h1>Example </h1>
    <p>Example Example Example Example Example Example Example</p>
    <p>Example Example Example Example Example Example Example</p>
    <p>Example Example Example Example Example Example Example</p>
</div>

then use media queries :

//for mobile 
       @media (min-width: 400px) and (max-width: 500px) {
        .img{
            margin-left: auto;
            margin-right: auto;
            width: 70%;
            background-color: #b0e0e6;
            }
        }
    //normal css for any size 
          .img{
              float: right;
              margin-right: 40px;
              margin-bottom: 20px;
              display: inline;
           } 
           #textwithimg{
              desplay:inline;
              float:left;
            }

Upvotes: 2

Nitekurs
Nitekurs

Reputation: 451

Try this below code in to your css: 

.img{
  float: right;
  margin-right: 40px;
  margin-bottom: 20px;
  display: inline;
} 

@media (min-width: 320px) and (max-width: 767px) {
    .img{
        float:none;
        display:table;
        margin: 0 auto;
    }
    }

or

@media (max-width: 767px) and (min-width: 320px)
.img {
  /* float: none; */
  /* display: table; */
  margin: 0;
  width: 100%;
  TEXT-ALIGN: CENTER;
}

Upvotes: 4

Related Questions