Tips for showing an image and text side by side on a mobile device using CSS

I am having trouble displaying the image and text side by side on mobile devices. It works fine on desktop, but on mobile, the image is appearing above the text. Can someone assist me in fixing this issue?

Below is an example of how it looks on a mobile device:

https://i.sstatic.net/0EBd4.png

Expected Output: I need both the image and text to be displayed on the same line, similar to how it appears on 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>
htmlcssmedia-queries

Answer №1

If you want to achieve a cleaner and more concise HTML structure, consider using flexbox for easy control over both vertical and horizontal centering.

By utilizing properties like justify-content and align-items, you can easily center elements within a container without the need for excessive CSS rules.

.product-container
{
 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;
}
.product {  
 display: flex;
 justify-content:center;
 align-items:center;
}
.product img 
{
 width:100px;
 padding:10px;
}
.product-info h2
{
 font-size:18px;
 color:#53585F !important;
 font-weight: 600;
}

See a live example on CodePen

Answer №2

If you want to hide all <br> elements nested directly within a <h2> element when the browser width is less than 768px, you can use this CSS snippet to achieve that:

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

Update

Initially, I thought you wanted the text to be displayed in one line only.
To keep an image alongside the text, consider using CSS3's flex property. Here is an example:

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

You can also specify the default horizontal proportions for each child element and control whether they should shrink or grow.

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

Answer №3

.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-logo.png">
 <div class="amazon-content">
<h2 class="amazon-text">Lorem ipsum dolor tetur adipiscing elit.</h2>
</div>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revamp the Bootstrap Form Upload feature

I am looking to redesign the Bootstrap Form Upload field. The main reason behind this is that in Bootstrap, the file upload field is treated as one single component, making it impossible to separate the file upload button from the file upload text. The fi ...

htmlcssangular

Having trouble making :hover work properly

I've been attempting to create a mega menu that activates divs on hover, but I just can't seem to get it to work. I've tried various methods, but the divs simply won't show when hovered over. If you'd like to take a look, here&ap ...

htmlcss

Experiment with altering the layout of certain navigation bars

I am currently attempting to customize the background color and text color for specific HTML components. Within my project, there are 3 navigation bars. I aim to establish a default color for all nav bars while also altering the specific color of one of t ...

htmlcss

Identify all untagged comments using regex

I am looking to extract all nodes from an HTML or XML file that are not commented out. Below is the regular expression I am currently using. My Regular Expression /<span.*?>([\s\S]*?)<\/span>/gi Here is an example of XML < ...

javascriptphphtmlregexxml

Disabling the ng-click event in a confirmation popup button: a step-by-step guide

Is there a way to prevent ng-click event from triggering in a confirmation popup button? 1[Screen-Shot] ...

htmlasp.netangularjsasp.net-mvc-4

Guide on toggling the button by clicking on the icon to turn it on or off

Within my angular application, I have implemented font icons alongside a toggle switch. Initially, the switch is in the ON state. The specific functionality desired is for clicking on an icon to change its color from white to red (this has been achieved) ...

javascripthtmlangulartypescripttoggle

Generate a unique token through a personalized form

**HTML** <div ref="addCardForm" id="card-element"> <div class="card_digit_text">Credit Card Number <input type="text" id="cardDigit" name="email" placeholder="0000 0000 0000 0000"> </div> ...

htmlvue.jsstripe-paymentsstripe.js

Strange spacing appears after image tags

My efforts to remove the space (red) between the <img> and the <div> have been unsuccessful. I have minimized it as much as possible. After researching similar threads, it seems that whitespace or newlines between inline-box elements can cause ...

htmlcss

Is it possible to convert CSS colors to alpha in images?

A few weeks back, I came across a web page discussing the possibility of replacing color areas in an image by applying a color mask and making them transparent. For instance, being able to make white areas transparent on an image of a logo that is placed ...

cssimagehtmltransparency

Filtering and searching within a diverse HTML table array

Looking to implement a filter feature in a table with a complex array structure: let items [ { "_resource":{ "values":[null, undefined, true, 'foobar', {'amount': 1111, 'isValid': true} , ...

javascriptjqueryhtmlangularjs

Uncovering the jsPlumb link between a pair of identifiers

Could someone help me understand how to disconnect two HTML elements that are connected? I have the IDs of both elements, but I'm not sure how to locate their connection in the jsPlumb instance. Any tips on finding the connection between two IDs? ...

javascriptjqueryhtmljsplumb

Tips for adding a CSS class to an HTML element on-the-fly

As a newcomer to JavaScript and AngularJS, my question may be considered naive by some. I am currently working on a tutorial project involving AngularJS. Here is the HTML code snippet I am dealing with: <link href="http://netdna.bootstrapcdn.com/boo ...

javascripthtmlcssangularjs

What steps can I take to improve the design of this layout created using Twitter Bootstrap?

Currently, I am designing a sample form layout using Twitter Bootstrap. The form displays fields horizontally, with a link between each field. My goal is to have bullet points appear on the right side of the fields when the link is clicked. However, the al ...

htmlcsstwitter-bootstrap

Bootstrap 4 modal with scrollspy feature for a seamless full-screen experience

I am trying to implement a full-screen modal using Bootstrap 4 that incorporates a scrollspy feature for scrolling the content within the modal body. I have successfully achieved the full-screen aspect, but I am facing issues with making the content scroll ...

htmlcssbootstrap-4bootstrap-modal

Problem with CSS hovering on images when hovering on links?

While attempting to add 2 hover images to my website, I encountered an issue where a black border appeared in the middle of the images. This was caused by the hover effects on the links. Below is the code snippet: a:hover,a:active { color:Black; o ...

htmlcss

What is the best way to elegantly display a block containing background and text using Angular and ngAnimate?

I'm a beginner when it comes to JavaScript and Angular. I am attempting to use ng-show and ng-hide for my background and text elements. However, I am experiencing an issue with my text: It smoothly hides, but when it is shown again, the text appears b ...

javascriptcssangularjsng-animateng-show

Eliminate HTML tags and formatting, but retain the anchor tags within the string

I have a string variable with HTML content that I need to clean up by removing all tags and formatting, while still preserving anchor tags for clickable links. content = "<div><a href=\"1\">I</a> was going here and then <a h ...

javascripthtmlangularjs

Is there a way to design a right border that is shorter in height than the div itself

I've got a box full of social media content below: 1 | 2 | 3 Is there any way to shorten the vertical pipes "|" so they don't extend beyond the height of the div? ...

htmlcssborder

The Spring Boot application is having trouble retrieving static files

I started a fresh springboot project and organized the directory structure as follows: view image description here The yml configuration is outlined below: server: port: 8783 servlet: context-path: /spring-demo spring: scan : com.example appli ...

htmlspring-bootvue.js

What is the most effective method for preserving RichText (WYSIWYG output)?

I am currently using a JavaScript-based rich text editor in my application. Could you suggest the most secure method to store the generated tags? My database is MySQL, and I have concerns about the safety of using mysql_real_escape_string($text);. ...

phpjavascripthtml