The mobile version of my website's home page is not displaying certain elements of the featured image

I'm in the process of launching a fresh new blog with Flask as the backend. Currently, I'm using a Bootstrap template and have set an image as the featured image. While it displays properly on computers, tablets crop it out. You can check out the page here.

The specific issue is with the image at the top featuring the word LEARN on cubes.

Is there a way to automatically resize this image instead of having it cropped on smaller screens?

Here's the code snippet for that section:

<div class="container">
<div class="jumbotron jumbotron-fluid mb-3 pt-0 pb-0 bg-lightblue position-relative">
    <div class="pl-4 pr-0 h-100 tofront">
        <div class="row justify-content-between">
            <div class="col-md-6 pt-6 pb-6 align-self-center">
                <h1 class="secondfont mb-3 font-weight-bold">AnyGeeks - A Tech Blog</h1>
                <p class="mb-3">
                    Welcome to AnyGeeks. Here we discuss anything about Tech, Provide Tutorials, Blogging Tips, Game Reviews or anything that involves tech.
                </p>
                <a href="./about.html" class="btn btn-dark">Read More</a>
            </div>
            <div class="col-md-6 d-none d-md-block pr-0" style="background-size:cover;background-image:url('{{ url_for('static', filename='img/home.jpg') }}')">    </div>
        </div>
    </div>
</div>

On line four from the end of the code is where the image is set. It would be much appreciated if someone could help fix this issue.

htmlcssflaskbootstrap-4web-deployment

Answer №1

It would be ideal to utilize the image with the img-fluid class, which ensures a 100% width within the div and calculates the height automatically.

<div class="container">
<div class="jumbotron jumbotron-fluid mb-3 pt-0 pb-0 bg-lightblue position-relative">
    <div class="pl-4 pr-0 h-100 tofront">
        <div class="row justify-content-between">
            <div class="col-md-6 pt-6 pb-6 align-self-center">
                <h1 class="secondfont mb-3 font-weight-bold">AnyGeeks - A Tech Blog</h1>
                <p class="mb-3">
                    Welcome to AnyGeeks. Here we discuss anything about Tech, Provide Tutorials, Blogging Tips, Game Reviews or anything that involves tech.
                </p>
                <a href="./about.html" class="btn btn-dark">Read More</a>
            </div>
            <div class="col-md-6 d-none d-md-block pr-0" >
                <img src="img/home.jpg" class="img-fluid">  
            </div>
        </div>
    </div>
</div>

Answer №2

Apply the following style to the background image: 

background-size: 100% 100%;
background-repeat: no-repeat;

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

Utilizing HTML to hide rows within a table by comparing each row with the one that comes before it

I am in need of assistance to solve a project I am working on that involves a table structure similar to this: https://i.sstatic.net/U0AI4.png Below is the code snippet I am currently using: <table class = "table table-striped table-hover"&g ...

phphtmlcss

Locate the chosen radio button within a group of <label> tags using the selenium webdriver

How can I iterate through all the label items within a div? There are multiple label tags with radio buttons inside. I'm using Selenium WebDriver and need to identify the selected radio button. Here are the two things I need to accomplish: Determine ...

javahtmlseleniumselenium-webdriverwebdriver

Jquery Timer that can be toggled on and off with a single button

I'm really struggling to find a way to make this work smoothly without any bugs. The button in the code below is supposed to perform three actions: Initiate a countdown when clicked (working) Stop the countdown automatically and reset itself when it ...

javascripthtmljquery

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

javascriptjqueryhtmlajaxcheckbox

Tips for eliminating the gap between a heading and column in Bootstrap 4

.rowHeight{ height: 100px; } .padding-0 { padding-right: 0px; paddig-left: 0px; margin-left: 0px; margin-right: 0px; } .cart{ ...

htmlcssbootstrap-4

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

javascripthtmlcss

Developing a Form Submission Feature Using JQuery Mobile

I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...

javascripthtmljquery-mobile

When HTML elements are unable to access functions defined in separate JS files

After successfully resolving the issue, I am still curious as to why the initial and second attempts did not work: The problem lay with an HTML element connected to an event (myFunction()): echo '<button class="btn remove-btn" onclick="myFunction( ...

javascripthtml

Applying CSS to color the letters of a text, without needing to alter the HTML code

I'm just beginning to learn CSS and today I received a school assignment: Below is the HTML code provided: <head> <meta charset="UTF-8"> <title>ABC</title> <style> /* CSS section */ </style> ...

css

Executing function with ng-click in AngularJS only on the second click of the button

Currently, I am studying AngularJS and working on an exercise that involves using the ng-click function. Strangely, I am only able to view the result after clicking upload for the second time. I am trying to display my json content but it's not workin ...

javascriptjqueryhtmlangularjs

Vue.js and Bootstrap - The Collapsing Effect

I am currently facing an issue while working with Bootstrap 5.1 or 4.6 as well as Vue.js 2. The functionality I am trying to implement involves clicking a button that triggers a collapse function. Below is the code snippet from my first Vue component: &l ...

bootstrap-4vuejs2bootstrap-5

Ways to automatically refresh HTML table in Django framework

How can I dynamically update the search content under the hostname column in an HTML table? The search content needs to be updated every time, and the row number should increase according to the number of hostnames entered by the user. Below is my index.h ...

javascriptpythonhtmldjangoajax

Fix image that won't load in Firefox

My website features an <img /> element that initially lacks a src attribute. The src is added dynamically using JavaScript at a later point. While Chrome hides it, Firefox displays an empty space: https://i.sstatic.net/3eZJ4.png Is there a way to p ...

javascriptjqueryhtmlcss

Using PHP to display dynamic data and add it to an HTML element

I have a unique situation where I am storing html elements, specifically <rect> svg elements, as strings in a database. In my PHP code, I retrieve and echo this data: $db = getConnection(); $statement = $db->prepare('SELECT `copy` FROM `dra ...

phpjqueryhtmlajaxsvg

Is there a way to retrieve a CSS file using AJAX from a separate origin?

Whenever I am trying to load a CSS file via AJAX from my dreamhost account, I encounter the error message that says No 'Access-Control-Allow-Origin' header is present on the requested resource. After searching for solutions online, I stumbled upo ...

cssajax.htaccess

The icon displays correctly in Firefox but is not visible in IE

link REL="SHORTCUT ICON" HREF="/images/greenTheme/favicon.ico" type="image/x-icon" While this code functions properly in Firefox, it appears to be causing issues in Internet Explorer. Can anyone provide guidance on how to resolve the compatibility issue w ...

javascripthtmlcss

Utilizing PHP and WordPress to categorize and showcase custom posts through looping

In the process of creating a dynamic webpage, I am faced with the task of presenting a list of categories in an accordion-style dropdown for a custom post type. Each category name should serve as the accordion title, while the associated posts are displaye ...

phpwordpressbootstrap-4

What is the most effective approach for delivering arguments to event handlers?

Consider the following block of HTML: <button id="follow-user1" class="btnFollow">Follow User1</button> <button id="follow-user2" class="btnFollow">Follow User2</button> <button id="follow-user3" class="btnFollow">Follow User ...

javascriptjqueryhtmljquery-selectorsjquery-events

Provide spacing on the sides for a background position

Is there a way to evenly space my background image with 10px margins on all sides instead of just the left side? Currently, it's only working on the left side. .login-page { display: flex; flex-direction: column; background: url("../src/As ...

htmlcss

Inheriting vertical height and alignment (inline-block)

I struggle to understand how these things work and I would greatly appreciate it if someone could provide an explanation. 1 http://d.pr/i/6TgE+ why http://d.pr/i/UAZn+ *it's actually 9. Here is the code snippet: <header> <div class=" ...

htmlcss