Optimizing font size and placement with media queries

I am looking to scale some text and position it over an image on mobile devices.

<style>
    #rcontainer {
    height: 340px;
    width: 100%;
    position: relative;
}


.rtext span {
    position: absolute;
    bottom: 130px;
    font-family: "Georgia", serif;
    font-size: 1.8em;
    color: white;
    padding: 0 40px;
    width: 100%;
    line-height: 110%;
}

@media screen and (min-width: 0px) and (max-width: 720px) {
    .rtext {
        font-size: 50%;
        padding: 0 40px 100px 0;
    }
</style>


 <div id="rcontainer">
    <img alt="" src="/portals/0/Images/photos/rexanne_griffeth_contact_info_850.png" />
<p class="rtext">
    <span>Contact: Rexanne Griffeth<br />
    6000 Hospital Drive<br />
    Hannibal, MO  63401<br />
    (573) 629-3564<br />
    <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="186a7d607976767d367f6a717e7e7d6c7058706a7077767471767d36776a">[email protected]</a>
 </span></p>
</div>

While I have successfully adjusted the font size with my media query, I'm struggling to position the text correctly over the image.

You can view the current results on my development URL. Click here.

Answer №1

Modify the 'bottom' property within the specified media query:

@media screen and (min-width: 0px) and (max-width: 720px) {
.rtext {
    font-size: 50%;
    padding: 0 40px 100px 0;
    bottom: 220px
}

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

Is it possible to include a class in a 'label' element?

Forgive me if this is a simple question, but I'm curious - is it possible to add a class directly to a 'label' tag without needing to enclose it in a 'span' tag for styling? As I delve into "CSS: The Missing Manual," the book instr ...

What is the best way to target only the immediate children of a div when using tailwindcss?

Here is the HTML code snippet I am working with: <div class="section"> <div class="header">header</div> <div class="content"> <div>sub contents 1</div> <di ...

When hovering over the child element, the hover effect on the parent element should be disabled

I'm dealing with a situation where I have two nested <div> elements. <div class="parent"> <div class="child"></div> </div> The challenge here is that I want to change the background of the .parent ...

JavaScript form with radio buttons

I'm completely new to JavaScript and I'm attempting to create a basic script that will show one form when a radio button is checked, and another form when the second radio button is clicked (with no form displayed when neither is selected). I kno ...

What is the best way to customize the text in the navigation bar at the top of the page

I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header? <div class="header"> <img src= ...

CSS techniques for aligning content

I am currently working on designing a website template, and I have encountered an issue with positioning three individual columns that contain blocks of content. My objective is to have the first block of content in each column start at the top of their re ...

Creating a seamless and interactive online platform

I am in the process of designing a website that has a sleek and dynamic layout, rather than just a static homepage. Let me explain further: Here is my current setup so you can understand what I am trying to achieve. By dynamic, I mean that when the page ...

The modal popup will appear in the center of the screen when the scrollbar is positioned at the top

I have a modal popup that is not consistently displayed in the center of the screen, regardless of the scrollbar position. I always want it to render at the center so the user doesn't need to scroll to see it. Below is the code I am currently using: ...

Is it possible to target elements within a UMAP iframe using CSS?

I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...

Changing the jQuery mobile side panel from push to overlay can be achieved by modifying the display settings when transitioning from a mobile view to a

I'm currently working on a project using jQuery Mobile (JQM) and jquery.mobile-1.4.5. My goal is to create a responsive side menu panel with a fixed header that works well on both mobile and tablet devices. For the design, I want the panel width to b ...

The menu item is having trouble aligning to the right side

Hello, I am currently working on developing a website menu for a project and I am facing an issue with aligning the "Login" Menu item to the right side. Any assistance in resolving this alignment issue would be greatly appreciated. I am also willing to pro ...

What is the best way to create a hover effect for this text?

When I hover over the image div, the text section will smoothly appear from the bottom. You can see an example of what I want here. Below, you'll find the HTML and CSS code I've implemented for this effect. ============================== ...

Implementing a consistent CSS structure for various media sizes

Utilizing CSS grid and Sass, I implement varying grid layouts for different screen sizes (phone, tablet, desktop). However, on certain pages, I desire the same layouts at slightly larger or smaller screens than others. Is there a way to achieve this witho ...

The art of selecting elements and attaching event listeners in a React environment

Currently, I am working on my portfolio website using Gatsby. The layout includes a sidebar on the left with navigational links (Home, About, Work, etc.), and the main content is displayed as one long strip of sections on the right. When a user clicks on a ...

Ways to fill ng-style with a CSS object

Creating a dynamic form to manipulate CSS properties in real time has been my latest project. I've managed to define the CSS property names and values within an object, but now I'm struggling to style the item elegantly on the page as the user in ...

JS-generated elements do not automatically wrap to the next line

For my first project, I've been working on a to-do list and encountered an issue. When I create a new div with user input, I expect it to start on a new line but it remains stuck on the same line. Can anyone point out where I might have gone wrong? I ...

Ways to eliminate gaps between div elements with CSS

I am currently working on a webpage that consists of one main div housing two inner divs (left_menu and content), along with an additional footer div outside the main container. When viewing the page, there seems to be a noticeable gap between the footer ...

Enhance your webpage design with stylish CSS formatting using Bulma cards

My HTML output is as follows: https://i.stack.imgur.com/aBdEF.jpg It seems that the footer is not matching up with the cards... The CSS component I am using looks like this: .card-equal-height { display: flex; flex-direction: column; height: 100%; ...

Implement Bootstrap and CSS to ensure that my content appears below the header when users scroll down

I am struggling with a simple HTML page that is working well with CSS, but encountering an issue where the input form gets placed above the header when scrolling down. I want the header to always remain above the content even while scrolling. Any suggesti ...

Transform the text with a stylish touch within a 'textarea' element

I am currently working on a form with the following design: At the moment, I am at this particular stage and focusing on some minor details: One issue I have encountered is that the "Your text..." appears stuck to the top left corner of the textarea. I a ...