Adding text on top of images for optimal mobile viewing

I'm struggling to ensure that the text stays contained next to the image. It's working fine on desktop and tablet, but I'm facing challenges with mobile. While I have managed to improve it slightly, I can't figure out what exactly I am missing.

  /* Container holding the image and the text */
   .container {
   position: relative;
   }

  /* Bottom right text */
  .text-block {
    position: absolute;
    display: block;
  bottom: 0;
  right: 0;
  left: 0;
  color: white;
    padding: 0px 40px 0;
    opacity: 0.;
    }

Here is an example of how it appears: https://i.sstatic.net/bYvfN.jpg

For Tablet: https://i.sstatic.net/azLzG.jpg

For Desktop: https://i.sstatic.net/Celpx.jpg

<div class="container">
  <img src="uploads/2018/09/App-Design.jpg" alt="App Design">
  <div class="text-block">
    <h6>App Design and Development </h6>
       <p>We design and develop iPhone and Android apps for startups and enterprises that are fully compatible with your daily operations.</p>
  </div>
</div>
csswordpress

Answer №1

Let me confirm, your goal is to ensure that the text in each section remains within the boundaries of its corresponding image without overlapping?

If this is the case, you can utilize overflow: hidden; to conceal any content exceeding the dimensions of the image.

If I have misconstrued the issue, please provide more details for clarification.

I trust this information proves beneficial to you!

Answer №2

In order to cater to mobile devices, it is crucial to define the height of each container appropriately. Here's an example:

@media only screen and (max-width:480px){
  .container {
    position: relative;
    height: 300px;
    /* or */
    min-height: 300px;
  }
}

Answer №3

 Currently, I find myself in this position where I feel like I'm getting closer, but not quite there yet. The titles are still overlapping slightly. Check out the mobile view at [1] https://ibb.co/dMfXez

 /* This is the container holding the image and text */
.container {
 position: relative;
}

/* Text block at the bottom right */
.text-block {
    color: white;
    padding: 5px 10px 0;
    position: absolute;
    bottom: 0;
    left: 50;
    opacity: 0.;
 }

Answer №4

How can I hide the description on mobile view while keeping the title visible, but display the description on PC and Tablet mode?

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

Playground Themed Central Menu Features

Check out the theme live preview here: I've been experimenting with different combinations of text-align: center; and margin: 0 auto; but I'm struggling to align the menu elements to the center of the page. Any assistance would be highly apprec ...

htmlcsswordpress

Troubleshooting Problems with Positioning and Floating in HTML and CSS

I'm facing some challenges with clearing floats (or it could be something else?). My goal is to have the #newsbar div free from the previous floats so that its width can extend 100% across the page/browser. I believe I've tried everything within ...

htmlcss

When the CSS animation has finished in JavaScript

I am currently developing a game using HTML/JavaScript, and I have implemented a "special ability" that can only be activated once every x seconds. To indicate when this ability is available for use, I have created a graphical user interface element. Since ...

javascripthtmlcsscss-animations

CSS for the root folder of an ASP.NET website

After deciding to venture into ASP.NET, I quickly encountered my first obstacle. The folder structure is as follows: \ ->Admin -->Admin.Aspx ->CSS -->Style.css ->Images -->bg.gif Default.aspx Default.master Both admin.aspx and ...

asp.nethtmlcss

Tips for customizing the appearance of the react-stripe-checkout form

Could someone please provide guidance on applying custom styles to the react-stripe-checkout form component, such as changing the background color? Visit this link for more information ...

javascriptcssreactjsformsstripe-payments

Utilizing JavaFX 2 with a touch of CSS styling

Currently, I am practicing JavaFX 2.0 and working on creating an XYChart with 2 line series while also customizing colors, strokes, etc. through a CSS file. In order to guide me through this process, I decided to refer to the following link: http://docs. ...

cssjavafx-2

CSS: adjusting styles for different screen sizes on both desktop computers and smartphones

While diving into Emacs, I am in the process of creating a website called Prince. The layout of columns is controlled by the directives below: body { font-family: var(--s-font-family); font-size: var(--normal-font-size); column-count: 3; c ...

htmlcssmedia-queries

Angular and Bootstrap project with an advanced dropdown menu featuring multiple levels

Looking to create a multi-level drop-down menu using TypeScript without relying on jQuery? Bootstrap CSS framework may not have exactly what you need. https://i.sstatic.net/iruev.png Wondering how to implement a multi-level dropdown in your Angular proje ...

htmlcssangulartypescriptbootstrap-4

Tips for keeping a label above an input field

Is it possible to add a styled label on top of an input element? I have seen images placed inside input elements for indicating the type of input accepted. For example, in a login form, a user icon represents the username field and a key icon represents th ...

htmlcss

The function of style.marginRight differs from that of style.marginLeft

One function aligns content to the left while the other doesn't align it to the right function openNavLeft() { document.getElementById("mySidenavLeft").style.width = "100vw"; document.getElementById("main").style.marginLeft = "100vw"; } function ...

javascriptjqueryhtmlcssbootstrap-4

Having trouble positioning the button on the right side of the page and aligning the text in the center of the page

Having trouble positioning the button to the right of the page and aligning the text in the center, despite adding CSS properties such as float: right. <div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padd ...

htmlcss

What can I do to prevent an anchor link from automatically scrolling to a different section of the page?

I've been attempting to prevent a page from scrolling after selecting an anchor link. Currently, the page layout includes a larger version of an image appearing in full view on the right panel after clicking on an image in the left panel (with text u ...

jqueryhtmlcssanchor

Issue with Bootstrap v3.3.7 panel not collapsing as expected following height adjustment

Utilizing bootstrap 3.3.7 panels, I encountered an issue when trying to slide up the panel using the icon. The panel would not hide properly once the panel height was set, resulting in only the panel content body sliding up. Here is an example: $(&apo ...

htmljquerycsstwitter-bootstrap

Express Node + Styling with CSS

I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...

cssnode.jsexpress

Displaying an image on a jsp page

In my current JSP, within the HTML section, I have the following: <select> <%if(size == 1)%> <option>None selected</option> <%if(size > 1)%> <option>1</option> </select> Additionally, I have this ima ...

htmlcssjsp

When the text input is selected, automatically scroll to the bottom

I found a codepen example by Chris Coyer and decided to fork it. My goal is to make the label move to the top instead of staying at the bottom, as in his original design. However, I am facing an issue with getting the cursor to move to the bottom when typ ...

htmlcsssass

Methods to Maintain Consistent HTML Table Dimensions utilizing DOM

I am facing an issue with shuffling a table that contains images. The table has 4 columns and 2 rows. To shuffle the table, I use the following code: function sortTable() { // Conveniently getting the parent table let table = document.getElementById("i ...

javascripthtmlcssdom

The file admin-ajax.php is unable to locate a predefined ajax action

At this point, I find myself needing to reach out and ask for your assistance. There is a specific part in the admin-ajax.php code that is supposed to check for your registered ajax action. However, I'm encountering an issue where my action is not be ...

phpajaxwordpress

Invoking a URL asynchronously on a website

Unique Font License Dilemma Recently, I came across a unique situation with a font license that required me to query a counter on the font provider's domain every time the typeface was displayed. However, the recommended method of using import in the ...

htmlcssasynchronous

Divs gracefully appear one after the other in a sequential manner

I am attempting to showcase a sequence of 4 divs in a row using the ease-in CSS transition feature. I came across this example that demonstrates what I am aiming for: http://jsfiddle.net/57uGQ/enter code here. However, despite my best efforts, I am unable ...

htmlcsscss-transitions