Adjusting the size of text according to the image and screen dimensions with Bootstrap

If you want to take a look at my SSCCE, here is the jsFiddle link. However, I'll provide an overview of my code below. My page is created using Twitter Bootstrap 4.0:

<!DOCTYPE HTML>
<html>
<head>
    <title>FooBar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
    <div class="col-lg-12 col-sm-12 well-lg">
        <img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
        <strong>Oops!</strong> Something went wrong!
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <button type="button" class="btn btn-primary btn-lg">Sign In</button>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">&nbsp;</div>
</div>
</body>
</html>

Upon reviewing the jsFiddle example, a few noticeable issues arise:

  1. The image appears excessively large;
  2. The h1 title beneath the image seems too small;
  3. Both the image and title lack horizontal centering on larger screens/viewports.

I aim to adjust either the bootstrap classes or CSS styles directly to achieve the following goals:

  • Centrally position the image and title at all times;
  • On desktop/laptop screens, the image should ideally occupy around 20% of both height and width;
  • For mobile devices, the image ought to encompass most of the screen width with slight padding on each side;
  • Ensure that the h1 title dynamically resizes its text to nearly match the image's width.

Any insights on where improvements can be made?

javascriptjquerycsstwitter-bootstrapbootstrap-4

Answer №1

Here is an illustration of a potential approach. It's important to note that the specific style choices are left up to you to customize according to your own preferences.

.well-lg img{
  width:20%;
}

body{
  display:flex;
  justify-content:center;
}



@media screen and (max-width:468px){
  .well-lg img{
    width:80%;
  }
  .well-lg h1{
    font-size:4em !important;
}
}
<!DOCTYPE HTML>
<html>
<head>
    <title>FooBar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
    <div class="col-lg-12 col-sm-12 well-lg">
        <img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
        <strong>Oops!</strong> Something went wrong!
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <button type="button" class="btn btn-primary btn-lg">Sign In</button>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">&nbsp;</div>
</div>
</body>
</html>

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

Positioning two images side by side by applying the parent element's class

I am interested in creating an image of 1 star arranged into 6 stars by simply targeting the parent element's class. .stars { /* which HTML tag should be used? */ } <div class="stars"> <img src="image/stars.jpeg"> <img src="ima ...

htmlcssimage

Problem Encountered with Navigation Bar following the Cloning and File Transfer in a React (Next) Project

I cloned the repository and transferred the files using these commands: 1. git clone https://github.com/adrianhajdin/portfolio.git 2. cd portfolio 3. mv * .. Upon executing npm run dev, everything appears fine, but upon clicking on the About button or ...

javascriptnext.jstailwind-cssframer-motion

When the content div is clicked within the overlay div, the popup will also close

I want to design a pop-up that features a container with a black background and some opacity, where the content of the popup is placed inside. Here's what I have in mind: <button (click)="showPopup = !showPopup">Open popup</button& ...

htmlcssangularjs

Is there additional cushioning beneath an image within a div element?

It appears that my div containing an image has extra padding at the bottom for some unknown reason. You can view the JSFiddle here: http://jsfiddle.net/KSs7V/ Any suggestions on how this padding might have been added and how to correct it? CSS: .artist ...

htmlcss

Tips for safeguarding primary design elements from modifications by user-contributed styles in a text entry box

Currently utilizing Wordpress, but I believe my inquiry pertains to any platform where users are granted frontend posting capabilities. I am interested in enabling users to customize the style of their posts, specifically limited to the description area. ...

phpjqueryhtmlcsswordpress

How do I remove all elements from the Canvas in R3F?

I need a way to clear all models from the Canvas with just one click and then switch over to a new Canvas. I want to make sure that all items are removed from memory before making the change. Is there a way to accomplish this? return ( <div clas ...

javascriptreactjsthree.jsreact-three-fiber

Get the selected row value from a Table and convert it into an array. Then, pass this array as a parameter to another function

I need help with logging and storing selected values from a Table component in React My Table component displays data from an API with checkboxes on each row. I'm using the <Table /> Material UI component for React. The documentation states th ...

javascriptarraysreactjsmaterial-uidom-events

The backend function of an aspx page is failing to execute when triggered by a $.ajax request

Currently, I am facing an issue with a web form IndexPage.aspx. The script in this front-end code makes an ajax call to a code-behind function. Take a look at the code snippet below: $.ajax({ type: "POST", url: &apos ...

javascriptjqueryasp.netajax

Using jquery.ajax to post to a single page without passing any variables

In order to capture the onclick event for a specific #id, I am retrieving form data and checking if $_POST['submit'] is set. If it is, I proceed to send an email. Although there are no errors, it appears that no data is being sent via post. < ...

javascriptjqueryajax

Switching class on a specific element in Angular 2

My element list appears like this: <ul *ngFor="let period of periodsDate"> <li [class.show]="isShown" (click)="toggleClass()"> <a>{{ period.id }} </a> </li> </ul> ...

javascriptangulartypescript

Assign a function in one class to be equivalent to a function in a different class

What is causing this issue and how should it be resolved? class A { constructor() { console.log('constructin A') } public someMethod = (x: string) => { console.log(x) } } class B { private myA: A constructor ...

javascripttypescript

What is the best way to include a select option in a Jquery Function?

I need to add a selection option for gender in my function, allowing users to choose between male and female. Below is the Function: function Add(){ $("#myTable tbody").append( "<tr>"+ "<td><input type='text'/ ...

jquery

Utilizing ng-switch for handling null values or empty strings

Can anyone assist me with this issue? I have a variable called $rootScope.user = {name:"abc",password:"asd"}. When a service response occurs, I am dynamically creating a rootscope variable by assigning it. How can I use ng-switch to check if the variable h ...

javascriptangularjsangularjs-scope

Eliminating a particular element from an Array

As an illustration, there exists an array of objects in the following format: var myarray = [{ id: 01, name: alison, active: false}, { id: 04, name: drex, active: true}, { id: 08, name: farel, active: true}, { ...

javascriptarrays

Is there a way to hide a paragraph or div using javascript?

I am experimenting with using buttons to hide paragraphs using javascript, but even when I set them as "hidden", there is still excess blank space left behind. Is there a way I can eliminate that extra space? Below is the javascript code: function backgro ...

javascripthtml

"Performing a series of getJSON requests with a delay between each call, iterating through an array

Could someone shed light on why my jQuery/JavaScript code runs with an unexpected flurry of ajax calls instead of at a steady 1-per-second rhythm? var i = 0, l = data.length; function geocode() { $.getJSON( 'https://maps.googleapis.com/maps/api ...

javascriptjqueryajaxjsonloops

Sending data over a network using Socket and node.js

Trying to update a location on a Google Map using socket.io and node.js. I have 2 different methods for updating the map. There may be some basic issue as I am new to this. 1) Method using an API call that works: app.post('/location', function( ...

javascriptnode.jssockets

Displaying JSON keys and values individually on an HTML page

Looking to display a JSON array in HTML using ngFor TypeScript : import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-for', templateUrl: './ng-for.component.html', styleUrls: ['./ng-for ...

javascripthtmlangular

How to efficiently retrieve a form's data from multiple forms with identical ids in JavaScript

I am facing a challenge with multiple forms on the html page that have the same ID. I need to send each form's information to the server based on user selection, but I haven't been able to find a relevant solution. For my Authorization polic ...

javascriptjqueryhtmlajax

Executing a Javascript function within a PHP script

I am trying to retrieve JSON data from a JavaScript function and use it as a variable in PHP. Here is the function I have: <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script> <script> $(fu ...

javascriptphpjson