Tips for creating Card-Title responsiveness across various screen dimensions with Bootstrap 4

I'm a beginner in web design and I'm wondering if it's possible to adjust the font-size of the card-title and the size of the card image based on different screen sizes using bootstrap 4. When viewed on small screens, they appear too large.

https://i.sstatic.net/Ar2tW.png

Below is my HTML code:

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10">
  <img class="card-img-top-a mx-auto d-block mt-5" src="img/a.png"> 
    <h5 class="card-title text-center mt-5 font-weight-bold">Pixel perfect design</h5>
    <p class="card-text px-auto text-justify">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10"> 
  <img class="card-img-top mx-auto d-block mt-5" src="img/b.png">  
  <h5 class="card-title text-center mt-5 font-weight-bold">Design Targeted</h5>
  <p class="card-text px-auto text-justify">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10"> 
  <img class="card-img-top mx-auto d-block mt-5" src="img/c.png">  
  <h5 class="card-title text-center mt-5 font-weight-bold">Finalize a FSL</h5>
  <p class="card-text px-auto text-justify">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>

Here is an example of my CSS code where I manage p{}.

Do I need to do the same for card-title, or is there another way to approach this?

@media (min-width: 0px) { p{font-size: 0.7rem;}}
@media (min-width: 576px) { p{font-size: 0.6rem;}}
@media (min-width: 768px) { p {font-size: 0.8rem;}}
@media (min-width: 992px) { p {font-size: 0.8rem;}}
@media (min-width: 1200px) { p {font-size: 1rem;}}

What should I do regarding images for different screen sizes? 

.card-img-top{
  width: 80px;
  height:80px;
}

Thank you for your guidance!

cssuser-interfacemedia-queriestwitter-bootstrap-4

Answer №1

Give this code a try. You may need to make adjustments to the text and title sizes, but it should work for you.

.card-img-top {
  width: 80px;
  height: 80px;
}

@media (min-width: 0px) {
  .responsive-text {
    font-size: 0.7rem;
  }
  
  .responsive-title {
    font-size: 20px;
  }
}

@media (min-width: 576px) {
  .responsive-text {
    font-size: 0.6rem;
  }
  
  .responsive-title {
    font-size: 0.7em;
  }
}

@media (min-width: 768px) {
  .responsive-text {
    font-size: 0.8rem;
  }

  .responsive-title {
    font-size: 0.7em;
  }
}

@media (min-width: 992px) {
 .responsive-text {
    font-size: 0.8rem;
  }

  .responsive-title {
    font-size: 0.7em;
  }
}

@media (min-width: 1200px) {
  .responsive-text {
    font-size: 1rem;
  }

  .responsive-title {
    font-size: 0.7em;
  }
}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10">
  <img class="card-img-top-a mx-auto d-block mt-5" src="img/a.png">
  <p class="card-title text-center mt-5 font-weight-bold responsive-title">Pixel perfect design</p>
  <p class="card-text px-auto text-justify responsive-text">Some quick example text to build on the card title and make up the bulk of the card's At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10">
  <img class="card-img-top mx-auto d-block mt-5" src="img/b.png">
  <p class="card-title text-center mt-5 font-weight-bold responsive-title">Design Tageted</p>
  <p class="card-text px-auto text-justify responsive-text">Some quick example text to build on the card title and make up the bulk of the card's At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius</p>

</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10">
  <img class="card-img-top mx-auto d-block mt-5" src="img/c.png">
  <p class="card-title text-center mt-5 font-weight-bold responsive-title">Finalize a FSL</p>
  <p class="card-text px-auto text-justify responsive-text">Some quick example text to build on the card title and make up the bulk of the card's At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius</p>
</div>

Answer №2

When using the rem unit, it is important to remember that it is relative to the root element of the document, which is typically the html element in most browsers.

html {
  font-size: 16px;
}

To only change the font size of the html element without affecting other elements, you can do so by adjusting the font value in the CSS code as shown below:

html {
  font: 16px Verdana
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

@media (max-width:400px) {
  html {
    font-size: 12px;
  }
}
<h1>foo</h1>
<h2>bar</h2>

For further editing and experimentation, you can access the Fiddle Link provided.

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

Creating an uncomplicated selector bar for a basic javascript slideshow

I've spent the last couple of hours teaching myself some basic JavaScript, so please bear with me. Currently, I have a simple code in place for a straightforward slideshow on a website. Here is the JavaScript I'm using (where the 'slide&apo ...

javascriptcss

Creating a unique store previewer customization

Are there any JavaScript libraries available to simulate the CSS image-mask property since it is not widely supported by browsers? I've been experimenting with creating a white image containing transparent areas in the shape of the design elements I w ...

cssimagehtml

I have expanded the CSSStyleDeclaration prototype, how do I access the 'parent' property?

I have developed some custom methods for CSSStyleDeclaration and implement them like this: A_OBJECT.style.method() ; The code structure is quite simple: CSSStyleDeclaration.prototype.method = function () { x = this.left; ..... etc } Here's my que ...

javascriptcss

Clickable list element with a button on top

Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...

javascripthtmlcss

Get rid of the drop-down shadow effect

Currently working on a website project for a client and looking to remove the blue "shadow" effect from the dropdown menus. I believe the code that needs editing is as shown below: .main_nav ul.sub-menu { position: absolute; top: 65px; width: ...

cssmenushadow

The button component is unresponsive

An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component => import React from "react"; expo ...

cssreactjsbuttonclickable

I'm seeking assistance with a frontend script problem. I'm curious if there are alternative approaches to coding this script that may be more effective. Can anyone offer guidance on this?

As a frontend developer specializing in script injection, I have been utilizing Adobe Target to inject scripts. However, this method presents several challenges: 1. It is difficult to debug code errors as my HTML and CSS are wrapped inside ' ' a ...

javascripthtmlcssfrontend

The placement of text appears to be incorrect when applying the float:left property in CSS

My issue is that I want #text1 to display on the right side of #video1, and #text2 to be positioned next to #video2. However, currently #text2 is also appearing beside #video1. Can someone please explain why this is happening and provide a solution to fi ...

css

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Using jQuery, I am adding HTML code to a div. One part of this code involves referencing a div's ID by concatenating a variable from a loop. $(... + '<div class="recommendations filter" id="recCards-'+ i +'">' + &apo ...

javascriptjqueryhtmlcssconcatenation

Replacing the left styling using CSS

Struggling to adjust the position of a side panel that pops up when hovering over an option. This is the code I found in Chrome Developer Tools: <nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show"> <ul ...

htmlcsscss-selectors

Enhance the appearance of an HTML select tag for optimal viewing on iOS Safari browser for

I have customized three dropdown lists using CSS. I set the style as follows: .dropdown{ font-size: 20px; background: white; border:none; position: relative; } While the dropdowns appear fine in Chrome, there seems to be a slight differen ...

htmlioscssiphonesafari

What is the process for changing the background color when a button or div is pressed, and reverting the color back when another button or div is

Looking to customize a list of buttons or divs in your project? Check out this sample layout: <button type="button" class="btn" id="btn1">Details1</button> <button type="button" class="btn" id="btn2">Details2</button> <button ty ...

javascripthtmlcss

Retrieve Element By Class Name in JavaScript

How can I modify the border color at the bottom of the .arrow_box:after? Javascript Solution document.getElementsByClassName("arrow_box:after")[0].style.borderBottomColor = "blue"; Despite trying this solution, it seems to be ineffective! For a closer ...

javascripthtmlcss

Using a CSS height of 100% does not always result in filling 100% of the parent's height

My parent div has a height of 250px. I then have multiple children with their min-height set to 100%. While the debugger confirms that the selector is correct and targeting the right elements, the height does not fill the parent's height at all; inste ...

htmlcssbootstrap-5

Text box size in user input not adapting on mobile devices

Website: Visit the Cutter Travel Calculator here I've encountered an issue with my user input text boxes on mobile. Despite setting their width using the formidable forms plugin, the size adjustment doesn't seem to apply when viewed on mobile de ...

javascripthtmljquerycsswordpress

The jQuery datatable is functioning correctly, however the button is rendered but is not

Originally, I have a datatable which can be viewed at the following link: The functionality I am experiencing is related to a "DISABLE" button that toggles to "ENABLE" and vice versa upon clicking. However, if you click on the same button after it has alr ...

jquerycssdatatable

Iterate endlessly over CSS styles in Angular 4

I'm looking to create a website background 'screensaver' by looping through an array of background URLs with a delay between switches. Currently, I have the array stored in my .ts file and I am using the NgFor directive in my HTML. However, ...

javascripthtmlcssangular

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

javascriptcssvue.js

Some browsers are failing to display the navigation bar on my website

After working on my website, www.alexanderpopov.org, I encountered an issue with the navigation bar disappearing on some computers and browsers. I'm using css to style it, but the problem persists. Below is the HTML code for your reference. Any advice ...

htmlcss

Is there a way to move the navbar to the right side of the screen?

How do I create a navigation menu that takes up half of the screen on the left side while allowing for scrolling on the right side without moving the navigation? What I am aiming for is similar to the images linked below: example example I attempted to u ...

htmlcssbootstrap-4