CODEWITHSUNDEEP
htmlcssmedia-queries
user6930268
user6930268

Reputation:

How to display image and text in same line in mobile device using css?

I am able to display the image and text in the same line in desktop but In a mobile device, it is not displayed in the same line.It is displaying image and below text. I have to display both in the same line. Would you help me in this?

Below image:-I am getting output like this in mobile device.

enter image description here

Output: I have to display both i the same line.like displaying in desktop 

.amazon-section{
    text-align:center;
    background-color: #fff;
    display: table;
    margin: 0px auto 0px auto;
    padding: 0px 38px 5px;
    border-radius: 04px;
    webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    position: relative;
    top: 20px;
    font-family:"Arcon-Regular";
    box-sizing: border-box;
}
.amazon-section img{
    width:100px;
    padding:10px;
    position: relative;
    right: 20px;
}
.amazon-content{
    display:inline-block;
}
.amazon-content h2{
    font-size:18px;
    color:#53585F !important;
    font-weight: 600;
    position: relative;
    top: 15px;
}
 <div class="amazon-section">
     <div class="amazon">
         <img src="images/amazon.png">
         <div class="amazon-content">
             <h2 class="amazon-text">Lorem ipsum dolor tetur<br /> adipiscing elit.</h2>
         </div>
    </div>
</div>

Upvotes: 1

Views: 1795

Answers (3)

jmag
jmag

Reputation: 826

.amazon-section
{

text-align:center;
background-color: #fff;
display: table;
margin: 0px auto 0px auto;
padding: 0px 38px 5px;
border-radius: 04px;
webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
position: relative;
top: 20px;
font-family:"Arcon-Regular";
box-sizing: border-box;
}
.amazon-section > img
{
width:100px;
padding:10px;
position: relative;
right: 20px;
}
.amazon{
 vertical-align:top;
 display:inline-block;
}
.amazon-content
{
display:inline-block;

}
.amazon-content > h2
{
vertical-align:top;
font-size:18px;
color:#53585F !important;
font-weight: 600;
position: relative;
}
 <div class="amazon-section">
 <div class="amazon">
 <img src="images/amazon.png">
 <div class="amazon-content">
<h2 class="amazon-text">Lorem ipsum dolor tetur adipiscing elit.</h2>
</div>
</div>
</div>

Upvotes: 0

Scott Weaver
Scott Weaver

Reputation: 7361

you can do this with flexbox and leave your html a little cleaner and leaner.

Basically, you can easily control both vertical and horizontal centering with justify-content (horizontal or main axis) and align-items (vertical or cross axis), which you can set on the container/parent directly.

.amazon-section
{
 text-align:center;
 background-color: #fff;
 display: table;
 margin: 0px auto 0px auto;
 padding: 0px 38px 5px;
 border-radius: 04px;
 webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
 -moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
 box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
 position: relative;
 top: 20px;
 font-family:"Arcon-Regular";
 box-sizing: border-box;
}
.amazon {  /*set children to be centered vertically and horizontally*/
 display: flex;
 justify-content:center;
 align-items:center;
}
.amazon-section img /*children need no positional css*/
{
 width:100px;
 padding:10px;
}
.amazon-content h2
{
 font-size:18px;
 color:#53585F !important;
 font-weight: 600;
}

codepen example

Upvotes: 1

ne1410s
ne1410s

Reputation: 7082

This piece of CSS will hide all <br> elements that are directly nested in a <h2> element at browser widths below 768px... In this case, achieving your goal as I understand it.

@media (max-width: 767px) {
   h2 > br { display: none; }
}

Update

I originally thought it was the text itself you wanted on 1 line.
In order to keep the image along side the text, I would suggest using CSS3's flex. For example:

.amazon {
    display: flex;
    align-items: center;  /* <- Helps with vertical alignment */
}

You can also specify how much of the horizontal proportions you want each of the children to occupy by default, and whether you wish to allow them to shrink or grow, etc.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions