What techniques can I use to format my blockquotes in this particular style?

I'm struggling to figure out how to incorporate yellow blockquotes into my quotes without the formatting causing unwanted indents and line heights.

My goal is to achieve something like this:

https://i.sstatic.net/4O1NR.png

This is what I've attempted so far:

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
}

.quote {
  line-height: color: #003b49;
  font-size: 2.9em;
}

<h1 class="contentquote"><span class="quote">&ldquo;</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">&rdquo;</span></h1>

However, this is the result I keep getting:

https://i.sstatic.net/7n9VN.png

Any assistance on this matter would be highly appreciated!

Answer №1

Your code has three issues that need to be addressed.

To begin with, you have mistakenly combined the properties line-height and color, resulting in line-height: color:. It seems like the inclusion of line-height is a typo since you haven't specified it in your code snippet. Make sure to separate these properties using a semicolon if you are actually using line-height.

Secondly, you need to remember to include the font reference along with assigning it to .contentquote. The Roboto Slab font can be accessed on Google Fonts and linked using

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
.

The third issue is related to the color value #003b49, which actually represents a bluish green rather than a yellowish orange. Replace this with the correct color value, which in this case is #fdb527.

In terms of positioning the quotes correctly, make use of position: absolute on .quote, set a negative margin-top to adjust its position relative to the text, and use the pseudo-selector :first-of-type to shift the first quote to the left with a negative margin-left on .quote:first-of-type. To counteract the negative margin, apply a padding-left on .contentquote.

Below is an example of how to implement these corrections:

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  padding-left: 22px;
}

.quote {
  color: #fdb527;
  font-size: 2.9em;
  position: absolute;
  margin-top: -16px;
}

.quote:first-of-type {
  margin-left: -22px;
}
  
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<h1 class="contentquote"><span class="quote">&ldquo;</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">&rdquo;</span></h1>

I hope this resolves the issues for you! :)

Answer №2

If you're facing a specific issue...

I'm struggling to figure out how to include yellow blockquotes in my quote without causing unwanted indentation or line height.

One solution is to use the CSS property position: absolute on the quotation marks to prevent them from disrupting the paragraph's flow. Additionally, indenting the paragraph can create a visual separation for the starting quotation mark.

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  padding: 0 0 0 20px;
}

.quote {
  color: #fdb527;
  font-size: 2.9em;
  position: absolute;
  margin-top: -16px;
}

.quote:first-child {
  left: 0;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<h1 class="contentquote"><span class="quote quote--start">&ldquo;</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">&rdquo;</span></h1>

Answer №3

Feel free to test out the code snippet below! :) 

In my personal implementation, I incorporated CSS pseudo elements :before and :after for the quotes.

*{ box-sizing: border-box; -webkit-box-sizing: border-box; }

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  max-width: 350px;
  width: 100%;
  padding: 15px 25px 56px 40px;
  background: #e4e4e4; 
  color: #575757;
  position:relative;
}
.contentquote p{ position: relative; display: inline-block; margin: 0; }
.contentquote p:before, .contentquote p:after{ color: #fdb527; font-size: 2.9em; position: absolute; }
.contentquote p:before{ left: -28px; top: -13px; content: "“"; }
.contentquote p:after{ bottom: -35px; content: "”"; }

.contentquote h2{ position: absolute; font-size: .7em; right: 28px; bottom: 18px; font-weight: normal; }
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<div class="contentquote"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor do eiusmod tempor.</p><h2>Temporary Name</h2></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

The jQuery toggle functionality seems to be malfunctioning

I have created a form that should toggle (hide and show) with the click of a button, but for some reason it's not working. Can someone please take a look at my code below and let me know what I'm doing wrong? $(document).ready(function () { ...

What is the best way to line up a label and a textarea?

Here is how my code currently looks: XXXXX XXXXX Description: XXXXX My desired output is: XXXXX Description: XXXXX XXXXX Sometimes the "Description" field can span multiple lines. Code snippet: < ...

What is the best way to align the Radio on the left using CSS?

Trying to recreate the design of the freeCodeCamp Survey Form Having trouble with using inline-block after .form-control input, specifically for radio buttons. Can someone help pinpoint what I'm doing wrong? Thank you! form{ background-color: g ...

What is the process for adding information to datatables using jQuery?

I have been struggling to make a data table in jQuery function correctly. I am able to append data to the table, but the sorting, pagination, and search features are not working. Even though the data is visible in the table, it shows as 0 records. I am wor ...

Place the text within the contenteditable body of a frame at the specific caret position

Within my iframe object, there is a contenteditable body. I am trying to paste text or HTML elements at the caret position. However, when I attempted this code snippet, I encountered an error message saying Cannot read property 'createRange' of u ...

modify the appearance of HTML controls in real time with C#

Is there a way to dynamically add an additional navigation item to my website's menu list when the admin logs in through admin.aspx? The menu list is created using HTML controls such as <ul>...<li>, and I would like the new navigation item ...

CSS - Placeholder styling not being effective when selectors are grouped

Why is Chrome successful at executing this code: .amsearch-input::-webkit-input-placeholder { color: red; } <input class="amsearch-input" placeholder="It works!" /> ...while it doesn't work in other browsers: .amsearch-input::-we ...

Dropdownmenu without borders

I'm having an issue with the dropdown menu on my website - there are no borders showing. I've tried fixing it myself with no luck, so I could really use some help. As a beginner in web development, I don't have much knowledge about these thi ...

Incorporating background-image in PHP code

After fetching an image from the database using PHP, I aim to display this image as a background in HTML. I attempted to do so with the following code, however it was not successful: <div class="fill" style="background-image:url('<?php echo "& ...

What's the best way to add a border of 1 pixel solid #ddd to a select box with the help of jQuery?

I'm in need of some assistance, Many websites utilize the jQuery framework to add stylish effects to their selectboxes. Unfortunately, I am limited to using ie7 at my workplace and I want to include a 1px solid #ddd border around my selectbox (which ...

Struggling to eliminate buttons upon clicking, but they persistently reappear (JavaScript, HTML)

I have encountered an issue with buttons in my table that I am struggling to resolve. Each row in the table contains a "Pack" action button, which when clicked, is removed to prevent accidental double-packing of items. Everything was functioning smoothly ...

Steps to make a unique custom tooltip without using jQuery by utilizing the title attribute

I am looking to implement a tooltip similar to the one shown in the image. The value in the title tag is dynamic and fetched from the controller. https://i.sstatic.net/C2v3D.png Below is the code snippet of my table: <table border="1" cellpadding="10" ...

Tips for preventing bootstrap from resizing the top card image too large while maintaining consistency across various image files

Hello, I'm facing an issue with bootstrap image sizing. When I insert images with smaller dimensions into a card, they are being blown up to fit the card which results in them becoming blurry. Here is the HTML code that's causing the problem: { ...

Open the .exe file using an HTML link in Firefox browser

While working on a project using php / js / html, I encountered the need to launch a C# application from my web page without requiring any downloads. The challenge was that I primarily use Mozilla Firefox and could only find solutions involving ActiveXOb ...

Navigation issues in Internet Explorer appear to be causing problems

I've been working on a new website template design and decided to incorporate a click navigation menu for added functionality (with a javascript fallback for accessibility). I found the menu design on Toddmotto.com and it worked perfectly in most bro ...

Troubleshooting problem with Vuetify's parallax fluid template

In my quest to implement a fluid template for responsive design viewports, I encountered an issue. The layout looks good on medium viewports (md) but fails to scale correctly on smaller viewports (sm or xs). This is because the height of the parallax backg ...

Why do HTML elements in an email have strange prefixes added to their IDs?

Currently, I am working on setting up automated tests for my service that automatically sends email reports. The objective is to verify the accuracy of data in the emails. To accomplish this, I have started assigning unique IDs to different HTML elements ...

Tips for adjusting container wrapping to accommodate smaller window widths in bootstrap 4

Bootstrap 4 is still new to me, and I haven't had much experience working with Bootstrap 3 either. One issue I've encountered is that when I apply the class col-(breakpoint)-(span) to div elements, they don't automatically align in a single ...

Leveraging HTML::Template inside a value attribute

Could someone please help me understand how to use an HTML::Template tag within a form field value in order to dynamically change that field? For example: <table border="0" cellpadding="8" cellspacing="1"> <tr> <td align= ...

Improving the way text entered in an input box is displayed using HTML table cells

Seeking advice on how to display the last two input boxes in a dynamic HTML table so that users can easily view the data they have entered. The issue arises when the length of the data in these columns is large, making it difficult for users to see all the ...