How to make header images, text and buttons responsive-PHP Chinese Network Q&A
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
How to make header images, text and buttons responsive
P粉604507867
P粉604507867 2023-09-17 09:51:15
0
1
570

I'm making a website using Bootstrap 5. In the header of the website I am using Carousel from Bootstrap for my header. Carousel images also allow text and buttons to be displayed. I want the images, text, and buttons to be responsive. I tried using media queries but I don't know how to do it.

Test.html

     Home |

Test.css

.c-item { height: 90%; } .c-img { height: 100%; object-fit: cover; filter: brightness(0.6); } #team-img { height: 100%; object-fit: cover; }

.c-item { height: 90%; } .c-img { height: 100%; object-fit: cover; filter: brightness(0.6); } #team-img { height: 100%; object-fit: cover; }
     Home |

P粉604507867
P粉604507867

reply all (1)
P粉221046425
P粉2210464252023-09-18 00:52:56 1 floor

The media query is written as follows:

@media screen and (min-width: 900px) { .carousel-inner{ color:#000; } }

I found that when using bootstrap, you need to add !important at the end to be read:

@media screen and (min-width: 900px) { .carousel-inner{ color:#000 !important; } }

If you want to learn more about media queries, check out this article:https://www.w3schools.com/css/css3_mediaqueries.asp

(Obviously, you may not want to change the font color, this is just an example.)

Like+0
Add Reply
    Popular Topics
    More>
    Popular Articles
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！