Tips for creating a responsive graphic using Bootstrap CSS

I am currently trying to determine how to create individual graphics that can be directly loaded via CSS and made responsive.

When I resize the screen, the graphics also adjust accordingly. However, on smaller displays such as mobile phones, the graphics overlap with the text. I would like to know how I can make the graphics smaller so they fit all screen sizes.

I am utilizing Bootstrap CSS for this purpose.

Here is an example of what I mean:

This is how it appears normally

And this is how it looks on a small screen

How can I ensure that the graphics resize appropriately?

c_cont h1{
background: url("../images/titl_left.png") no-repeat scroll left 9px, url("../images/tit_rght.png") no-repeat scroll right 9px rgba(0, 0, 0, 0);    
color: #d4676b;
font-family: "Miama";
font-size: 37px;
margin:0 auto;
padding: 0px 0;
text-align: center;
width: 63%;
height:auto;
color: #fa6e05;
htmlcsstwitter-bootstrap

Answer №1

By setting the width to 63%, the image remains at that size regardless of screen scaling. However, keep in mind that 63% on a large screen is much larger than on a mobile phone.

To control when the image should scale down, consider using a media query like this:

@media screen max-width (600px){
/*code goes here*/
}

Another option is to use max-width and a percentage width to keep the banner in proportion. This may still require a media query unless you want the banner to fill most of the laptop screen space.

c_cont h1{
max-width:600px;
width:100%; /* keeps image scalable, taking up full available width */
height:auto; /* scales proportionally */
}

I hope this information proves useful!

Answer №2

Specify the maximum viewport dimensions for your CSS using media queries.

    img
    {
        height: 500px;
        width: 700px;
    }

    @media screen and (max-width:640px)
    {
      img
      {
        height: 200px;
        width: 250px;
      }
    }
    <img src="https://fanart.tv/api/download.php?type=download&image=13138&section=3" />

Expand the snippet to full-screen and adjust your browser size to observe the effect.

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

Adjust the flexslider to transition to a new slide when hovering over the thumbnails

I have a flexslider with thumbnails like this ; https://i.stack.imgur.com/9bfC2.jpg I am looking to change the slide when the user hovers over the thumbnails. How can I achieve this functionality? Here is the jQuery code I am currently using to set up th ...

javascriptjqueryhtml

EJS file not displaying stylesheets and images correctly during rendering

I'm currently in the process of building a website, but when I try to render an ejs file (index.ejs), only the HTML portion is displayed without showing any stylesheets, fonts, or images. Here is the code snippet for linking the stylesheets: <!D ...

htmlnode.jsexpressdirectoryejs

CSS: Is it possible to make a div even smaller than the invisible padding of a font?

link to code: http://jsfiddle.net/xVCrn/1/ (best viewed in chrome / webkit) I'm attempting to create a 1px margin for the red section within the dark button area, but I am struggling to adjust the height of the red part. =( The objective is to: ...

css

Modifying color scheme in ASP.NET web application's table

Although I'm not very familiar with this, I'll try to help out. I have an ASP.Net MVC web app in Visual Studio where one of my views, called View Details, contains a table that displays colors based on a specific scale. This scale consists of onl ...

htmlasp.net-mvccolorshtml-table

Enhance Your Layout with Bootstrap 5 Images and Centered Elements

As I delve into learning Bootstrap 5, I am experimenting with creating a more "advanced" layout. The idea is to have two images positioned next to each other with titles below them, and a div centered between both. Ultimately, they will be displayed in a r ...

htmlcsstwitter-bootstraplayoutbootstrap-5

What is the best way to center align an element while having another element situated directly below it?

I want to create a grid of "clock" elements, with five clocks in each row. Below each clock, I'd like to display the DAY and DATE centered with the clock (day on top line, date below). Since I'm new to html/css, I appreciate your patience. Here&a ...

javascripthtmlcss

Issues with ellipses not functioning properly have been identified specifically on Safari when using the line

Currently, I am using the line-clamp feature to restrict the titles on a blog to only two lines at most. This functionality works perfectly fine on Firefox and Chrome browsers; however, when it comes to Safari, the ellipsis appears in the middle of the sen ...

csssafari

Creating a unique blur effect on divs using HTML and CSS

Currently working on a website project and facing an issue where I need to apply Gaussian blur within a div. Although opacity can be adjusted, the challenge lies in blurring the text within the div. Seeking assistance for this matter <html> < ...

htmlcss

Tips for incorporating Material.io outlined icons within css pseudoelements (::before) usage

I'm attempting to incorporate the Material.io icon into a button using ::before, but it is appearing filled rather than outlined. Unfortunately, there are no available instructions on how to display the icon in an outlined style. This is the code I ...

cssiconsmaterial-designmaterial-ui

Jquery scroll animation not reaching the intended position when scrolling upwards

While developing a new feature for my music player, I encountered an issue with centering the track/div upon clicking in the scrollable parent div. Sometimes it doesn't scroll to the center as intended and instead scrolls erratically to the top of the ...

jqueryhtmlcss

Issues with clearRect() function in HTML5 canvas

Recently, I developed a function with the goal of redrawing a square line block that covers the entire page whenever the window size is adjusted. For reference, you can view my code at http://jsfiddle.net/9hVnZ/ However, I encountered an issue: bgCtx.cl ...

javascripthtmlcanvas

It is impossible for tailwind to overflow while attempting to adjust the menu to the screen size

Here is the full code snippet: https://jsfiddle.net/3Lapnszc/1/ I am attempting to adjust the left navigation menu on the screen. <main class="flex flex-grow w-full h-screen"> <aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm: ...

htmlcsstailwind-css

Placing a group of input fields and a button based on the data-id attribute of the element

I have a form that appears when a button is clicked, and the save button saves input values into an object. Is there a more efficient way to write this function if I need to create 9 more buttons with different data-id attributes (e.g. data-id="2" and so ...

javascriptjqueryhtml

The value calculated by Auto does not display as a valid number in Angular 8 until it has been manually edited

Having an issue with a form submission for invoicing. The total value field, which is auto-calculated based on quantity and unit price, does not show up as numeric data in the backend onSubmit event unless I manually interact with it by adding something ...

htmlangular

An issue occurred: TypeError - Unable to access the 'subscribe' property of an undefined object during a POST HTTP request in Angular [8]

I'm currently attempting to send data to a REST API using Postman. I am encountering an issue where I receive the error "Cannot read property 'subscribe' of undefined" when making a POST HTTP call, as shown in the console log: https://i.sta ...

javascripthtmlangularangular8

Tips for updating border color when focused with styled-components

How can I change the border color of an input on focus using styled-components and React? Here is the code snippet I am currently using: import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; const String ...

javascriptcssreactjsstyled-components

Unique Tags and Javascript: A customized approach

In the process of developing a web application, I am aiming for high standardization. To achieve this goal, I plan to utilize custom namespace tags that will be modified by JavaScript based on their functionality. For instance: <script type="text/java ...

javascripthtmlxml-namespaces

What is the method used by React or Next to prevent the <a> tag from refreshing the page while still loading content?

I'm currently diving into the world of NextJS and utilizing the Link component from the 'next/link' package. One thing that has been puzzling me is how the <Link> component ultimately renders an <a> tag with a href='/tosomew ...

javascripthtmlreactjsreact-routernext.js

Eliminate spacing between divs of varying heights

I'm facing an issue with my small gallery of images. Despite having the same width, they vary in height causing the second row to start below the tallest image from the previous row. How can I eliminate these empty spaces while still maintaining the v ...

javascripthtmlcss

Issue with the alignment of DIV container due to spacing issues

In the screenshot below, there is a DIV container with padding of 15px on the left and right. However, the contents are appearing spaced out downwards for some reason... Other than the left & right padding, no other styling seems to be affecting it. Adjus ...

csshtmlinputspacing