search

KMankowski / BattlefieldTSA

A trio of websites used for the 2019 TSA Webmaster competition.
1 stars 2 forks source link

Remove Description Text from Course Boxes in battlefield #20

Open KMankowski opened 4 years ago

KMankowski commented 4 years ago

Using media queries, remove the descriptive text within boxes on smaller screen sizes. See below.

Screen Shot 2020-08-01 at 8 47 59 AM
Deepakmukka1 commented 4 years ago

Ok sure i will work on it

Deepakmukka1 commented 4 years ago

@KMankowski so you want to get removed the descriptive text completely and only the heading should be?

KMankowski commented 4 years ago

Yep, but only on smaller screen sizes! Essentially, it should stay as is on larger screen sizes, but the descriptive text should be removed on smaller screen sizes. The most ideal way to do this would be to set the <p> tag containing the descriptive text to display: none on smaller screen sizes. You can find out more below:

This project follows the Bootstrap breakpoints: https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints

Introduction to media queries: (updating things across screen sizes) https://www.w3schools.com/css/css3_mediaqueries.asp

How to remove HTML tags/elements on smaller screen sizes: https://stackoverflow.com/questions/17762354/remove-element-for-certain-screen-sizes