Shifting the image below the text for mobile display

My goal is to place an image below a block of text when viewed on a mobile device, but currently, the image is covering the text.

Here is how it appears on desktop:

[![enter image description here][1]][1]

This is the current mobile view (the image is overlapping the text):

[![enter image description here][2]][2]

Here is how I want it to look:

[![enter image description here][3]][3]

The idea is to have the image positioned between the text and the button. I have attempted to use 'display:block' - my thought was that if it's considered a separate element, it will automatically appear after the text, but it hasn't worked.

Any assistance would be highly appreciated.

<script src="https://static.hsstatic.net/jquery-libs/static-1.1/jquery/jquery-1.7.1.js"></script>
    <script type="text/javascript">hsjQuery = window['jQuery']</script>
    <link href="https://static.hsstatic.net/content_shared_assets/static-1.4049/css/public_common.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn2.hubspot.net/hub/-1/hub_generated/template_assets/1495141902003/hubspot_default/shared/responsive/layout.min.css" rel="stylesheet">

...

Answer №1

For optimal mobile viewing, make sure your starmanImage div does not have position: absolute applied to it. Additionally, ensure that your starmanImage img does not have transform: translateY(-50%) set.

To resolve this issue, simply include the following CSS within the @media query for Mobile Devices:

.starmanImage{
    position: relative;
}
.starmanImage img{
    transform: none;
}

Answer №2

According to @CBroe, the issue occurs because the image div container is set to absolute positioning. In order to fix this, you just need to disable it at specific screen sizes.

@media (max-width: 768px){
  .starmanImage img{
    transform: none !important;
  }
  .starmanCurve, .starmanImage {
    position: relative !important;
    /* This is just some top padding */
    padding-top: 30px;
  }
}
<script src="https://static.hsstatic.net/jquery-libs/static-1.1/jquery/jquery-1.7.1.js"></script>
    <script type="text/javascript">hsjQuery = window['jQuery']</script>
    <link href="https://static.hsstatic.net/content_shared_assets/static-1.4049/css/public_common.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn2.hubspot.net/hub/-1/hub_generated/template_assets/1495141902003/hubspot_default/shared/responsive/layout.min.css" rel="stylesheet">


<link rel="stylesheet" href="https://content.littlefish.co.uk/hs-fs/hub/1907421/hub_generated/template_assets/1509367336144/custom/page/Inbound/inbound.min.css">
<link rel="stylesheet" href="https://content.littlefish.co.uk/hs-fs/hub/1907421/hub_generated/template_assets/1515754183680/Custom/page/Inbound/audit.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:300,400,600,700|Source+Sans+Pro:400,600" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//fast.fonts.net/cssapi/f1a0f2ac-0b00-438c-950f-841026767235.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   


<div class="results-wrapper-container clearfix">
<div id="starmanLow" class="starmanText section-hidden" style="display: block;">
<h2>Unsatisfactory user centricity (0-40)</h2>
<p>Put simply, your Service Desk is not performing to an acceptable level, and as a result you’re putting your organisation’s performance at risk (while paying for the privilege). From the time it takes to resolve user issues, to overall business alignment and the skill levels on offer, your Service Desk is way below the standards you need to take your business to the next level.</p>
<p>We would strongly urge you to look at alternative partners who will be far more focused on delivering a personalised approach that puts your users first and foremost. Speak with Littlefish to discover how you benefit from a designated group of accredited technicians who truly understand your business and the needs of your users – and build on that knowledge with each contact. Littlefish resolves over 70% of issues at first point of contact and has a 95% customer satisfaction rating, which means your users remain productive and you get to focus on strategic operational decisions rather than being dragged in to deal with day-to-day firefighting.</p>
<div class="formLink">Stop wasting money and talk to Littlefish</div>
</div>
<div id="starmanMedium" class="starmanText section-hidden">
<h2>Satisfactory user centricity (41-80)</h2>
<p>Unfortunately, quite good isn’t good enough. Your Service Desk has some capabilities but you’re missing out on a full, user-centric service. And when margins are tight and the competition fierce, all your suppliers should be pulling you forward to greater operational efficiency. Is your Service Desk proactively introducing you to the latest systems, better tools, and suggesting more streamlined ways of working? Do you have a designated team, who know your users by name and understand what is important to them?</p>
<p>As your business grows and new challenges appear, you need a Service Desk that is flexible and professional enough to grow with you. Look for a Service Desk that can boast 95% customer satisfaction with over 70% of issues resolved at first contact. Don’t settle for second best: find a partner who will give you an optimal service time and time again.</p>,
<div class="formLink">Boost your business performance with Littlefish</div>
</div>
<div id="starmanHigh" class="starmanText section-hidden">
<h2>Excellent user centricity (81-100)</h2>
<p>Congratulations, we don’t often see many other Service Desks rated as excellent. That’s because Littlefish sets an extremely high bar when it comes to IT excellence. Our <a href="https://www.littlefish.co.uk/careers" target="_blank">Littlefish Academy</a> is a structured training and development program that ensures all our staff have the latest skills to offer a world-class service. Our first line is a second line capability engineer, which is why we deliver 95% customer satisfaction and resolve over 70% of issues at first point of contact.</p>
<p>While your current provider is delivering what they promised, what about delivering <em>more</em> than promised? Littlefish go above and beyond expectations with a ‘shift left’ philosophy – growing knowledge about your users and finding ways to optimise their experience. It’s a personal approach from a designated team that solves issues your users didn’t even know were there.</p>
<p>In a fast-evolving industry, it pays to look at your options. Chat to us for an honest comparison with your current provider’s talent.</p>
<div class="formLink">Learn the true meaning of talent with Littlefish</div>
</div>
<div class="starmanImage"><img src="https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></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

Next.js horizontal scrollbar appearing unexpectedly

As I work on my Next.js project, I've noticed an issue with unwanted horizontal scrollbars appearing on every subpage. These scrollbars allow scrolling about 30px horizontally, but only appear when the content extends beyond the viewport. I attempted ...

All the optgroups in the select picker are being duplicated from the first optgroup

I am currently facing an issue with a select picker multiple dropdown. When I add optgroups, the values of the second and third optgroups are being copied by the first optgroup. The opt-groups are being populated via JavaScript. <select class="mod ...

Is it possible to trigger a winform function from an HTML page?

Looking for assistance with my WinForm application that includes a C# WebBrowser control. The WebBrowser control loads an HTML page which features a button. I am seeking a way to trigger a function in the WinForm (such as Form1.cs) when this button is cl ...

HTML: Issue with H1 alignment in class

I'm a beginner with HTML and I've been attempting to center the H1 using a CSS class, but it doesn't seem to be working for me. Here's my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> ...

Click on the entire table to be redirected to the specified link

Currently, I am facing an issue with styling my tables as links. I have 3 tables and I want each table to be a clickable link. However, after implementing the links, I am unable round the corners of the tables. I envision the final look to be similar to t ...

Get all text that comes after a closing tag up to a designated tag using JSOUP

I have this snippet embedded within a plethora of table rows in a table: ......... <tr class="greycellodd" align="right"> <td align="left"> <input type="checkbox" name="cashInvestment" value="100468057"/> </td> <td align="left"& ...

Tips for enabling auto-scroll feature in MuiList

Currently, I am working on a chat window component that utilizes Material UI for styling. I expected that setting a height or max-height on either the MuiList or MuiBox encapsulating the list would automatically scroll to the new message when it's sen ...

Update the numerical data within a td element using jQuery

Is there a way to use jquery to increase numerical values in a <td> element? I've attempted the following method without success. My goal is to update the value of the td cell by clicking a button with the ID "#increaseNum". Here is the HTML st ...

Can an element on a webpage be dynamically assigned an ID using JavaScript or PHP?

Is it possible to dynamically set the ID of an element during runtime of a webpage? Let's consider this scenario - <body id="body1"> Now, I would like to dynamically set the ID of this "body" element using a variable value in PHP code. Is som ...

Past methods: Obsolescence alert and caution

Trying to grasp the concepts of PHP & MYSQL, I have written this code which seems to be functioning properly. However, there are several "warnings" that I am unsure about. Nonetheless, PHP successfully connects to the database. Below are the relevant codes ...

Differences in font sizes across various browsers on Mac devices

In the given scenario, a navigation bar is displayed. The elements of this navigation bar have varying widths, but when combined together, their total width matches that of their container element, which is the ul. The problem arises when viewing the navig ...

`Apply a distinctive color to certain text within the selected text option`

                Does anyone have suggestions on how to create a color highlight with the word "stock" (see image for reference) using CSS, JavaScript, jQuery, or any other language? ...

Creating a div caption that mimics a form label, but with the background div border removed, can be achieved

Is there a way to create a div caption similar to a form label (positioned in the middle of the border), but without the div's border interfering? The issue is that I can't just use a background color for the H1 (caption) element because there is ...

Swapping one div for another, all the while incorporating a limited number of buttons within the webpage

I'm faced with a dilemma on my HTML page. In the middle of the content, there's a div that contains 4 links with images and text inside. What I'm looking to achieve is for each link to trigger a complete change in the div when clicked, with ...

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

Expand Navigation Bar upon Hover

My goal is to recreate a Navigation Bar similar to the one found on this website: I want the Navigation Block to expand and show Menu Items when hovered over, just like the example on the website mentioned above. I've attempted to use Bootstrap and ...

What methods do publications use to manage HTML5 banner advertisements?

We are working on creating animated ads with 4 distinct frames for online magazines. The magazines have strict size limits - one is 40k and the other is 50k. However, when I made an animated GIF in Photoshop under the size limit, the image quality suffered ...

Element on navigation bar extending full width of the page

As a fairly new designer, I am facing an issue with my navbar button. Currently, it is only 100 pixels wide and fixed in place, allowing the rest of the page to scroll past it. However, although it is confined to 100PX in width, it still spans across the e ...

Interactive Javascript Dropdown Selection

I'm currently developing a registration page for a website and I've added a drop-down box that explains to users why we need their birthday. However, I seem to be having issues with my code. Take a look at the script below: <script language=& ...

Struggling to retrieve the tagName attribute when clicking in JavaScript

I am trying to extract the tagName of any element within an iframe when it is clicked. Unfortunately, my JavaScript code is not working as expected. As a beginner in JavaScript, I would appreciate some guidance on where I might be going wrong. <div cl ...