What is the best way to create a responsive design showcasing both a button and text overlaid on an image?

As someone new to web design, I recently attempted to add a button and text on top of an image. While I was able to achieve this, the issue I encountered is that it's not responsive. Can anyone provide guidance on how to make it responsive?

Here is my code snippet:

.imagewrap {display:inline-block;position:relative;}
.bookbutton {position:absolute;bottom:25px;left:505px;}

.bottom-left {
  position: absolute;
  bottom: 25px;
  left: 20px;
  font-weight: bold;
  font-stretch:ultra-condensed;
  font-size: 20px;
  padding-right: 10px;
  padding-left: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="main_heading my-5">
  <div class="text-center">
    <h1 class="display-1">Games available for paying</h1>
    <h5 class="display-6">Book your slot now</h5>
    <hr class="w-25 mx-auto" />
  </div>

  <div class="container">
    <div class="row">

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="FIFA 2020" class="img-fluid naFIFA ">
        </figure>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light "> FIFA 2020 </div>
        <button type="button" class="btn btn-info bookbutton ">Book Now</button>
      </div>

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="NFS Heat" class="img-fluid naNFS">
        </figure>
        <button type="button" class="btn btn-info bookbutton">Book Now</button>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light"> NFS- Heat </div>
      </div>

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="Controller" class="img-fluid naNFS">
        </figure>
        <button type="button" class="btn btn-info bookbutton">Book Now</button>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light"> DualShock 4 </div>
      </div>

    </div>
  </div>
</section>

After following online tutorials and incorporating Bootstrap into my code, I have run into a problem with the button not being responsive when resizing the browser. I would appreciate any advice on improving my code as a beginner.

Edit: I neglected to mention the challenge with the button remaining fixed when resizing the browser. While other elements appear fine to me, please point out any errors in my code if noticed.

htmlcssbootstrap-4

Answer №1

To make the .bookbutton stay on the right side of the container, simply change left:505px; to right: 0;.

Here is the full code snippet:

.imagewrap {
  display: inline-block;
  position: relative;
}

.bookbutton {
  position: absolute;
  bottom: 25px;
  right: 0;
}

.bottom-left {
  position: absolute;
  bottom: 25px;
  left: 20px;
  font-weight: bold;
  font-stretch: ultra-condensed;
  font-size: 20px;
  padding-right: 10px;
  padding-left: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="main_heading my-5">
  <div class="text-center">
    <h1 class="display-1">Games available for playing</h1>
    <h5 class="display-6">Reserve your slot now</h5>
    <hr class="w-25 mx-auto" />
  </div>

  <div class="container">
    <div class="row">

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="FIFA 2020" class="img-fluid naFIFA ">
        </figure>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light "> FIFA 2020 </div>
        <button type="button" class="btn btn-info bookbutton ">Reserve Now</button>
      </div>

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="NFS Heat" class="img-fluid naNFS">
        </figure>
        <button type="button" class="btn btn-info bookbutton">Reserve Now</button>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light"> NFS- Heat </div>
      </div>

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="Controller" class="img-fluid naNFS">
        </figure>
        <button type="button" class="btn btn-info bookbutton">Reserve Now</button>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light"> DualShock 4 </div>
      </div>

    </div>
  </div>
</section>

Answer №2

Here is your solution, remember to replace the images and make sure to include Bootstrap 4 stylesheet to avoid content overlap.

.bookbutton {
        position: absolute;
        bottom: 25px;
        right: 20px;
      }

      .bottom-left {
        position: absolute;
        bottom: 25px;
        left: 20px;
        font-weight: bold;
        font-stretch: ultra-condensed;
        font-size: 20px;
        padding-right: 10px;
        padding-left: 10px;
      }
<section class="main_heading my-5">
      <div class="text-center">
        <h1 class="display-1">Exciting Games Not To Miss!</h1>
        <h5 class="display-6">Reserve Your Slot Now</h5>
        <hr class="w-25 mx-auto" />
      </div>

      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 mb-4">
            <div class="position-relative">
              <img
                src="https://yourimageurl.com"
                alt="Game Title"
                class="img-fluid gameImage"
              />
              <span class="bottom-left p-6 mb-0 bg-secondary text-light">
                Game Title
              </span>
              <button type="button" class="btn btn-info bookbutton">
                Book Now
              </button>
            </div>
          </div>

          <div class="col-12 col-md-6 mb-4">
            <div class="position-relative">
              <img
                src="https://yourimageurl.com"
                alt="Game Title"
                class="img-fluid gameImage"
              />
              <span class="bottom-left p-6 mb-0 bg-secondary text-light">
                Game Title
              </span>
              <button type="button" class="btn btn-info bookbutton">
                Book Now
              </button>
            </div>
          </div>

          <div class="col-12 col-md-6 mb-4">
            <div class="position-relative">
              <img
                src="https://yourimageurl.com"
                alt="Game Title"
                class="img-fluid gameImage"
              />
              <span class="bottom-left p-6 mb-0 bg-secondary text-light">
                Game Title
              </span>
              <button type="button" class="btn btn-info bookbutton">
                Book Now
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

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 for media queries to effectively support mobile devices?

I have a specific requirement for my <input type="number"> element where I need the up and down spinner buttons to be displayed for selecting the next value. However, on mobile devices, these spinner buttons are not visible. To address this ...

htmlcssmedia-queries

Move the accordion slider to the top of the browser

I'm working with an accordion menu that has some long content. To make it more user-friendly, I want to add a slide effect when the accordion items are opened. Right now, if you open the first two menu items, the last item's content is cut off a ...

javascriptjquerycssscrollaccordion

Troubleshooting JavaScript Object allocation problem

As someone who is not an expert in JavaScript, I have a question that may seem silly. Let's say I have the following snippet of HTML: <div> <script type="text/javascript"> var variable_2 = new SomeObject(); </script ...

javascripthtmlajaxperformance

I am in search of a specialized 3D camera with a unique effect

I am seeking assistance with animating a camera to replicate or closely resemble the effect seen in this demo: Any help would be greatly appreciated. ...

javascripthtmlwebgl

Implementing login functionality in an Angular application with the help of Kinvey.Social and utilizing the Promise API

I have been utilizing the Kinvey HTML5 library in an attempt to create a client-side application that integrates Google identities for Login. While the Oauth transaction appears to be functioning properly, I am encountering an issue with toggling the visib ...

javascripthtmlangularjskinvey

Ways to display data from specific columns using their names in a pair of dropdown lists

I am faced with the challenge of creating a drop-down menu containing column names from a database table. In addition, I need to implement another drop-down menu. My goal is to have the values of the selected column name from the database table displayed ...

javascriptphphtml

Picture in a clear background without any alteration

Is there a way to create a background-color with opacity inside an image without affecting the image itself? The issue lies in the fact that the transparent background-color makes everything underneath it, including text and the image, transparent. Below ...

javascriptjqueryhtmlcss

Obtain CONTENT from a separate CONTENT using JSExecutor

Having trouble selecting and clicking an element on a page due to the #document tag. Here is my latest attempt: var doc = (OpenQA.Selenium.Remote.RemoteWebElement)_driver.ExecuteQuery("return window.document"); doc.FindElementByXPath("//span ...

javascriptc#htmlseleniumxpath

Incorporating intricate HTML elements through a Chrome content script

Currently, I am utilizing Chrome extension's content script to generate a sophisticated display that is incorporated into web pages. Initially, I tested it by integrating it directly onto a website, but now I want to package it in an extension. The ...

javascripthtmlgoogle-chromegoogle-chrome-extensioncontent-script

Trouble with displaying HTML content on BrowserField in a BlackBerry device

After successfully solving the issue I posted here, it turns out that the problem was not with parsing, but rather in URL creation. :) Now a new challenge has arisen - the data obtained through parsing contains HTML tags. I attempted to display the HTML c ...

htmlbrowserblackberryfield

The dynamic addition of divs to the HTML body is causing them to overlap

Check out this functional plunker that is nearly complete. The current issue I am facing is with the chat divs being dynamically added to the body using $compile, but they all have the same CSS class and end up overlapping each other, like so: .chat-wind ...

cssangularjs

Mobile Apps Plagued by Frozen Preloader Gif Images

Working with jQueryMobile(1.3.1) and Phonegap(2.7.0) for developing Android and iPhone applications has presented me with a challenge regarding the Preloader Image. I am currently using a Gif image as my preloader. The custom function I am using for the p ...

jqueryhtmljquery-mobilecordovaimage-preloader

Using PHP to dynamically pull and update webpage content directly from the database

Currently, I am utilizing PHP to upload information into a database and then using PHP again to display that data. In the code snippet provided below, PHP is used to exhibit all the content stored in the database. Each row within the database table will b ...

phphtmlmysql

Ways to ensure child element takes up the entire screen

Here is the layout I am working with: <ul class="all-content white-bg"> <row> <div class="col-md-3"> <!-- Content --> <div class="content white-bg fullscreen clearfix"> < ...

jquerycsshtmltwitter-bootstrap

How to customize a disabled paper-input element in Polymer 1.0?

Help with Polymer 1.0: I've encountered an issue where setting a paper-input element to 'disabled' results in very light gray text and underline, making it hard to read. I've been trying to use CSS to change the text color but haven&ap ...

csspolymermaterial-designweb-component

What is the best way to choose a row from MYSQL database?

I am trying to access a user's information from my database using the following code: <?php $database="myweekdatabase"; $con = mysql_connect("localhost","root" ,"");//for wamp 3rd feild is balnk if (!$con) { die('Could not connect: ' . m ...

phphtmlmysql

The overlay button is designed to start the video only when clicked on the center of the screen. However, if clicked on any other part of the video, it will stop

$(".video") .parent() .click(function () { if ($(this).children(".video").get(0).paused) { $(this).children(".video").get(0).play(); $(this).children(".playpause").fadeOut(); $("video").attr("controls", true); } else { $ ...

javascripthtmljquery

Guide to placing a heading in one corner and a button in the opposite corner

Desired Outcome: I am aiming to achieve a design similar to the one shown in the image below. https://i.sstatic.net/7AbdL.png Actual Result: However, what I ended up with looks more like the image below. https://i.sstatic.net/nrQZf.png This is my HTML: & ...

htmlcsstwitter-bootstrap

How come my primary content is always spilling onto the header section?

Whenever I try to insert my header (after adding my context), it ends up getting placed below the context, making it invisible. I have attempted adjusting the padding and other sizes, but nothing seems to resolve the issue. https://jsfiddle.net/L30trdfn/ ...

html

What is preventing me from adjusting the width of an image that extends outside of its parent container, even though I am able to modify the height?

I am facing an issue with a div on my website that has specific properties: #viewport{ overflow: hidden; display: block; position: relative; width: 323px; height: 323px; } Embedded within this div is an element with the following prop ...

javascriptjqueryhtmlcss