Guide on creating text with a colored-filled rectangle in HTML and CSS that is responsive

I'm seeking assistance with incorporating basic HTML and CSS into a grid layout.

I'd like to include an image that represents the result I am aiming for:

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

#rectangle {
  width: 100%;
  height: 40px;
  background: #8DB23F;
}
<div class="row">
  <div class="col-md-12" id="rectangle"><span id="first" style="background-color:white;color:#8DB23F;font-size:40px;padding:7px 0px 2px 1px;border-color:white;margin-left: -15px;"><strong>&nbsp;&nbsp;&nbsp;JAW CRUSHER&nbsp;</strong></span></div>
</div>

I have managed to create this layout, but it is not responsive. Can someone please help me fix this issue?

htmlcss

Answer №1

This is a recommendation designed for plain background color and single line text. Give it a try.

.section {
  width: 100%;
  height: 40px;
  background: #8DB23F;
}
.section h3{
  line-height: 40px;
  background: white;
  display: inline-block;
}
<div class="section">
    <h3>&nbsp;&nbsp;&nbsp;RECOMMENDED ITEM</h3>
</div>

Answer №2

i believe implementing this code snippet will assist in achieving the desired layout

<div class="container">
   <div class="row">
      <div class="col-md-12" id="rectangle"><span id="first"><strong>&nbsp;&nbsp;&nbsp;IMPACT CRUSHER&nbsp;</strong></span></div>
   </div>
</div>
<style>
#rectangle{
     width:100%;
     height:auto;
     background:#4F86C6;
     }
 #first{
    background-color:white;
    color:#4F86C6;
    font-size:35px;
    padding:7px 0px 2px 1px;
    border-color:white;
    margin-left: -15px;
}
@media screen and (max-width: 480px) {
    #first {
        font-size:18px;
    }
}
</style>

Answer №3

#rectangle {
  width: 100%;
  display:block;
  height:40px;
  background-color: red;
}

strong {
  background-color: #fFF;
}
p {
  flex: 1 0 auto;
  margin-right:10px;
  font-size:30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-12" style="display:flex;align-items: baseline;">
    <p ><strong> JAW CRUSHER </strong></p>
    <div id="rectangle"></div>
  </div>
</div>

Answer №4

#Container {
width: 100%;
height: auto;
background: #8DB23F;
}
#title {
background-color: white;
color: #8DB23F;
font-size: 40px;
padding: 10px 0px 3px 3px;
border-color: white;
margin-left: -15px;
}

@media screen and (max-width: 480px) {
#Container {
height: 100%;
}
#title {
font-size: 37px;
}
}
<div class="row">
 <div class="col-md-12" id="Container"><span id="title"><strong>&nbsp;&nbsp;&nbsp;CRUSHING MACHINE</strong></span></div>
</div>

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

Is it possible for my OAuth2 callback page to share the same HTML page? Also, what is the process for obtaining the token?

In my setup, I am working with static html and javascript along with C# Web API. One of the scenarios I encountered involves a link that triggers an oauth2 server from my HTML file named index.html. The question arises: Is it appropriate to establish the c ...

c#javascriptjqueryhtmloauth-2.0

Transform CSS filters into SVG filters

Implementing CSS filters on the <img /> elements has been successful for me. For example: filter: brightness(1) contrast(67%) saturate(250%) grayscale(0%) invert(0%) hue-rotate(330deg) sepia(40%) blur(0px); Now, I am trying to apply the same filte ...

htmlcsssvgsvg-filterscss-filters

Customize WordPress pages by adding a variety of unique logos for a

I am currently customizing a WordPress theme (Increate themes) for a client. They are looking to have a page with different content and a unique logo. My question is, how can I change the logo specifically for this page? This is the section of code in my ...

phpwordpresshtml

Creating identical height columns with uniform inner elements is a problem that needs to be solved with caution. The proposed solution

Issue: I need to create a responsive layout with 5 columns, each containing an image, title, and text. The goal is to align the images separately, titles together, and texts individually while ensuring that all elements in a row have the same height. Solu ...

javascripthtmljquerycssbootstrap-4

Shadowy figure in block form

result photo and required modifications The image on the left shows the result I obtained in a browser, while the one on the right displays the desired outcome in Figma. I am struggling with creating a semicircle with a shadow under the coin and implemen ...

htmlcssbootstrap-5

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Can anyone assist me with a problem I am facing on my scripting page? I am currently working on a website that showcases properties. I would like to know how to prevent a specific div from loading when the page initially loads, and instead have its content ...

javascriptjqueryhtml

Adjust the CSS property dynamically based on the quantity of items within a div container

Can CSS3 be used to style the children divs of a parent div with specific conditions, such as: If there are 3 divs, apply property x to divs 1 and 2. If there are 2 divs, apply property x to div 1. If there is 1 div, do not apply property x to it. Is jQ ...

jqueryhtmlcss

What is the method for converting a string into HTML formatting?

I am working on a Django project. My goal is to display an output string on an HTML page. Here is my view: def strategy_run(request): output = "hello world!\nstring test" return render_to_response('strategy_run.html', locals()) T ...

pythonhtmldjango

How can you style text with a circular border using CSS?

I'm struggling to locate an example of what I need. My goal is to make a circle around my text using CSS. While I've seen examples of circles with the text inside, in this case, I aim to have a circle surrounding the text. Here's an illustr ...

htmlcss

Using javascript to dynamically change text color depending on the selected item

I am currently working on a website for a snow cone stand and I want to incorporate an interactive feature using JavaScript. Specifically, I would like to color code the flavor list based on the actual fruit color. The flavor list is already structured i ...

javascripthtmlcsssass

The code for the bouncing image isn't functioning properly outside of the JSFiddle environment

I'm having issues with this jQuery snippet in my web application. It works fine on jsfiddle, but not when I add it to my project. Here's the code: $('.myimage').mouseenter(function() { $(this).effect('bounce',500); }); Her ...

javascriptjqueryhtml

Working with Thymeleaf and DatePicker to establish a minimum date

Looking to establish a minimum selectable date in my datepicker using Thymeleaf. Attempted code: <label th:utext="#{${name}}" th:for="${name}" class="control-label"></label> <div class="input-group input-group-prepend"> <span cla ...

javascripthtmldatepickerthymeleaf

Learn the process of dynamically expanding a specific Bootstrap menu item using jQuery!

To create a left vertical (sidebar) navigation menu, I will be referencing the "Example" located at https://getbootstrap.com/docs/5.0/components/accordion/. Assuming there are three HTML buttons: <button onclick="myFunction1()">Button 1< ...

htmljquerycssbootstrap-5

What is the best way to populate a select input field with options using JavaScript?

When I am loading an HTML table, there is a select input field that needs to display some options. Immediately after constructing the HTML table row, I invoke a function to populate this input field using its class. Below is the relevant HTML snippet and ...

javascripthtml

The surprising way Next.js disabled the production build and transformed my rgba color into hsla

I created CSS code to display grid patterns like this: background-image { repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20 ...

cssnext.jsrgba

When incorporating props into styled components, the outcome often turns out to be unexpectedly

I have implemented styled components to change the text color by passing props. <Button variant = 'colour' type="submit" form="myForm" className="submit-btn"> Submit </Button& ...

cssreactjsnext.jsstyled-components

Hover over the text only, not the entire row

Is there a way to create a mouse hover effect on text only, without affecting the entire row? I attempted using Position(), but didn't have success. Here is a link to the fiddle I created: <ul id='ulid'> <li>Task1</li> < ...

javascriptjqueryhtmlcss

What is the best way to determine the accurate size of a div's content?

There are 2 blocks, and the first one has a click handler that assigns the block's scrollWidth to its width property. There is no padding or borders, but when the property is assigned, one word wraps to the next line. The issue seems to be that scrol ...

javascripthtmlcss

Swapping out the current div with the outcome from jQuery

I'm attempting to retrieve the most recent data for a div and replace it. The ajax query is fetching the entire HTML page, from which I am locating the right div. Now I want to update the current right div with the new content. $.ajax( { ...

javascriptphphtmljquery

PHP Session-Based Language Toggle

I have implemented a simple session switch on my website to make it bilingual. However, there is a flaw - whenever the user switches to the other language, they are redirected back to the index page. I am looking for a solution that allows the user to stay ...

phphtmlsession