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

Excessive content - letter "y" disrupts the row layout on mobile devices

I have created a custom CSS class called "custom-class" and applied it to the col div. This column contains dynamic images, so I have added a vertical scrollbar property to handle the overflow. While everything looks fine on a desktop, the layout breaks o ...

htmlcssbootstrap-4

Prerender is running independently of the dynamic page title and meta tags rendering process

As part of a POC, I was integrating prerender.io with an angular-node application for SEO purposes. My application can be found HERE. The good news is that all three links are being crawled successfully, as confirmed by receiving a 200 OK status for all li ...

javascripthtmlangularjsseoprerender

Ways to center Bootstrap panel in the middle of a webpage

Is there a way to center this entire panel on the web page? I could use some guidance with this. Does anyone have recommendations for a good book to learn Bootstrap design? <div class="panel panel-default" style="max-width:500px;margin-left:auto;margi ...

htmlcssasp.net-mvctwitter-bootstrap

Is it possible to alter the color of the text "midway" within a character on a website?

In some desktop applications, I've noticed a cool feature where the color of text changes as the background evolves. This allows for multiple colors on a single character, which is especially useful when displaying progress bars with percentages insid ...

htmlcsscolorsprogress-bar

What is the best way to trigger a JavaScript onclick event for a button that is located within a dropdown menu on an HTML page

I've implemented a feature that resizes the font size within a text area based on the selected font size. It was functioning flawlessly... until I decided to place the font size selection in a drop-down menu, which caused the feature to stop working. ...

javascripthtmlcss

Unable to align a 1px element with the primary border

Can you please assist me? I would like to modify the CSS markup below in order to remove the 1 pixel added extra on the active clicked tab from my UL LI Tabbed Menu. How can this be achieved? Here is a picture of the issue: HTML Markup: <div class=" ...

htmlcss

Tips for aligning a div (or any other content) in the center of a

I recently added a small div to my webpage to display 3 options in a stylish way, but I'm encountering an issue - the box is appearing on the left side instead of the center. I have tried using various CSS properties like align-items, align-content, a ...

htmlcss

How to enhance a jQuery tab control by implementing custom JavaScript forward and back arrows?

Although there are other questions related to this topic, mine is unique. I have a scrolling jQuery feature that utilizes tabs for selection and is automated. Modifying the layout is challenging because it is dynamic and depends on the number of items in t ...

phpjavascriptjquerytwitter-bootstrap

I am trying to make my CSS divs remain in the exact same position on the background image, even when the browser is resized both horizontally and vertically. How can I achieve this?

I need the red dot divs to remain fixed on a world map, regardless of browser resize. Not sure if I should be adjusting div properties or background. Here's my CSS code, any feedback is appreciated as I'm new to web design: HTML: <!DOCTYPE ...

htmlcss

Utilizing an offline HTML file instead of a URL within Objective-C programming

Is there a way to modify this code to utilize an offline (bundled) file instead of the "http://5times9.com"? - (void)loadAddWeb { UIWebView *addWeb = [[UIWebView alloc] init]; NSURL *webURL = [NSURL URLWithString:@"http://5times9.com"]; NSURLRequest *we ...

iphonehtmlobjective-ciosuiwebview

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

Looking for assistance in locking or disabling the Appearance -> Customizer -> Additional CSS area on Wp-admin. https://i.sstatic.net/FXXSE.png I have referred to this codex: https://codex.wordpress.org/Theme_Customization_API. However, I couldn&ap ...

phpcsswordpresswordpress-themingwp-admin

Angular JS application failing to load in browser due to a simple issue

I recently completed working on two pages index.html and app.js, which were created while following a helpful tutorial found here. The structure and content of each page are outlined below: index.html <!DOCTYPE html> <html ng-app ="store"> ...

angularjshtml

Drupal 7 FlexSlider - alignment issue with image placement

I am encountering an issue with the Flexslider module on my Drupal 7 website. I have created a simple slider that displays 3 photos. I enabled touch screen functionality for the slider, and everything seems to be working fine except for one problem - all t ...

jquerycssdrupaldrupal-7flexslider

Transform the appearance of a complex image by altering its color using CSS

In my quest to bring a unique functionality to life, I am looking to achieve the following: I want to layer two transparent images within a <div>: one representing an object and the other depicting a glowing effect around the object. When hovering ...

htmlcssimage

Including onMouseUp and onMouseDown events within a JavaScript function

I am experiencing an issue with a div that contains an input image with the ID of "Area-Light". I am attempting to pass the ID of the input image to a function. Although event handlers can be directly added inside the input tag, I prefer to do it within ...

javascripthtml

Perform time update every second

Is it feasible to have my timeupdate function run every second? (Using VUE CLI) @timeupdate="videoSecond" videoSecond(){ let Second = this.player.currentTime(); let CaptureList = this.capturesList; CaptureList.forEach(element => ...

javascripthtmlvue.js

What is the best way to navigate between different areas of an image using html and javascript?

I am currently in the process of learning how to develop mobile applications, and I am still in the early stages. Although this question is not directly related to mobile development, it pertains more to html/css/js. My goal is to create a simple game wh ...

javascripthtmlcssimage

Issue with Bootstrap 4 form failing to submit select box content

I have designed a basic bootstrap 4 form using a GET method, but it seems to only send the values from the Submit button and not from the select tag above it. Although the intention is for this to later be handled with a POST request, I have temporarily s ...

htmlformsbootstrap-4

Adaptable Image Functionality in Jquery Carousel

I've encountered an issue with my images within a jquery slider. While the slider itself is functioning properly, I am facing a couple of challenges. Initially, I aimed to make the images responsive, but upon removing the height property, the content ...

javascriptjqueryhtmlcss

Exclude the UL hierarchy from removing a class in jQuery

Check out this fiddle to see the code snippet: http://jsfiddle.net/3mpire/yTzGA/1/ I am using jQuery and I need to figure out how to remove the "active" class from all LIs except for the one that is deepest within the hierarchy. <div class="navpole"&g ...

javascriptjquerycss