Creating a custom blockquote style for a WordPress Twenty Fifteen child theme

Currently, I am creating a new child theme for Twenty Fifteen completely from scratch. The one area I am struggling with is customizing the appearance of the blockquote using CSS.

Here is an example of the custom CSS I have added to the blockquotes within the child theme:

border-left: 4px solid #f1f1f1;
    border-left: 4px solid rgba(31, 31, 31, 1);
    border-style: inset;
    color: #0099cc;
    font-size: 18px;
    font-size: 1.8rem;
    font-style: italic;
    line-height: 1.6667;
    margin-bottom: 1.6667em;
    padding-left: 0.7778em;
    padding-top: 0.7778em;
    padding-bottom: 0.7778em;
    padding-right: 0.7778em;
    margin-left: 0px;
    background-color: #1f1f1f;
    border-color: #cc0099;

While this styling works perfectly on larger screens, I am encountering an issue on smaller screens, particularly mobile resolutions. It seems that the blockquote CSS from the main theme is taking precedence over the custom styling I have applied. I am currently unable to pinpoint the reason behind this behavior.

htmlcsswordpress

Answer №1

Take a look at the parent theme as they utilize various media queries to adjust the appearance on different screen sizes. The Twenty Fifteen theme includes several media queries:

    /**
     * 16.1 Mobile Large 620px
     */

    @media screen and (min-width: 38.75em) {


    }

    /**
     * 16.2 Tablet Small 740px
     */

    @media screen and (min-width: 46.25em) {


    }

    /**
     * 16.3 Tablet Large 880px
     */

    @media screen and (min-width: 55em) {


    }

and so forth...

In your child theme, you can override these with your desired values.

@media screen and (min-width: 38.75em) {

    blockquote {

      --- insert your value here ---

    }

}

other media screen queries..

---------------- update -----------------

Consider adding the following to your child theme:

@media screen and (min-width: 55em) {
    blockquote {
    font-size: 20px;
    font-size: 2rem;
    border-style: inset;
    color: #0099cc;
    border-left: 4px solid #f1f1f1;
    border-left: 4px solid rgba(31, 31, 31, 1);
    background-color: #1f1f1f;
    border-color: #cc0099;
    }
}


@media screen and (min-width: 46.25em) {
blockquote {
    font-size: 18px;
    font-size: 1.8rem;
    border-style: inset;
    color: #0099cc;
    border-left: 4px solid #f1f1f1;
    border-left: 4px solid rgba(31, 31, 31, 1);
    background-color: #1f1f1f;
    border-color: #cc0099;
    }
}

blockquote {
    padding-right: 0.7778em;
    border-style: inset;
    color: #0099cc;
    border-left: 4px solid #f1f1f1;
    border-left: 4px solid rgba(31, 31, 31, 1);
    background-color: #1f1f1f;
    border-color: #cc0099;
}

@media screen and (min-width: 18.75em) is not necessary and can be removed.

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

What steps can I take to ensure that the original field does not regain focus once the dialog is closed?

My users prefer not to switch from the keyboard to mouse while filling out an input form. To address this, I am using the onFocus event to display a JQuery UI Dialog. However, when I use the dialog's close(); function, the dialog reopens as the origin ...

javascriptjqueryhtmljquery-ui

Clicking on the ajax tab control in asp.net displays a single rectangular box - how can this be removed?

When using tab control in Ajax, I encountered an issue where a blue rectangle box appeared when clicking or opening the page. How can I remove this unwanted box? ...

javascriptjquerycssasp.netajax

CSS - stacking containers vertically with scrollbars

I am in need of a vertical stack of blocks, which may include scrolls, contained within a fixed-sized container without scrolls. The number of visible blocks is dynamically managed by JavaScript code. Some blocks can be hidden or shown, and when a block is ...

htmlcss

Resolving the Smooth Scrolling Problem

Here is a simplified version of what I am currently working on: Although I have managed to get the scrolling functionality to work, there seems to be an issue with transitioning from one section to another. For example, when clicking on NUMBER 3, it s ...

javascriptjqueryhtmlscrollsmooth-scrolling

The overflow of CSS text selection color spills beyond the boundaries of the box

I'm just starting to learn CSS and was wondering if there is a way to prevent the text selection color from extending into the 'gutter' (I believe that's the correct term) like shown here: It may seem trivial, but I've observed th ...

css

The CSS :not selector does not work as intended

My goal is to assign the class no-color to a specific tag. When JavaScript is enabled, I want this class to be removed and the text to be colorized. However, my current CSS solution is not working as expected. Below is a sample code snippet demonstrating t ...

htmlcsssass

What is the best way to utilize justify-content or align-self to perfectly center this?

Despite my efforts to center it, I'm struggling to do so. I've experimented with justify-content and align-items for each row and col class, but unfortunately, nothing seems to be effective. In the breakpoints (md, lg), I really need the 4 lorem ...

htmlbootstrap-4

Tips for managing the velocity of JavaScript navigation scrolling

Hey everyone, I recently discovered this incredibly helpful JavaScript sticky side navigation script and it works like a charm! However, since I don't know much about JS, I was wondering if there's a way to slow down the scrolling speed? functio ...

javascriptjqueryhtmlcss

What is the best way to center text vertically in a <div> using CSS?

This is my first attempt at creating a chrome extension, and I am currently working on centering text. Right now, I am using text-align: centre; to align the text horizontally, but I am struggling to figure out how to align it vertically. As a result, my t ...

htmlcssgoogle-chromegoogle-chrome-extension

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...

javascripthtmlcss

Tips on using JQuery to extract form field information from a drop-down menu, display it in a div, and then compare it with the subsequently

In my HTML file, I am using two dropdown lists and JQuery for validation. First, I need to save the selected items from both dropdown lists in a variable and then compare them with the next selection. If the data from both dropdown lists match, an alert m ...

javascriptjqueryhtmlajaxjson

Error encountered: A missing semicolon was detected before a statement while executing code within a for

Although this question may have already been asked, I am struggling to understand why it is not working as expected. I simply want to increment the markers array within a for loop and then add each marker to the vector source using vectorSource.addFeature ...

javascriptjqueryhtml

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

Connecting a custom bootstrap stylesheet to WordPress

I'm having trouble linking my WordPress Stylesheet to a child theme in a different directory/subfolder. The code I placed in the functions.php file doesn't seem to be working correctly. Here is the code snippet: function theme_add_bootstrap() { ...

csswordpresstwitter-bootstrap

Click outside of this popup to dismiss it

I have been struggling to figure out how to make this popup close when clicking outside of it. Currently, it only closes when clicked directly on it. Your assistance in this matter is greatly appreciated. Here is the HTML code: <h2>Popup</h2> ...

javascriptcsspopup

When a Mui Button is clicked, it changes the color of all tabs instead of just the active

My website footer contains 5 links represented by Mui Buttons with the component set to {Link} in order to transform them into clickable links. Currently, all the buttons are black and change to green when hovered over. However, I want the button color to ...

cssreactjsmaterial-ui

Neglect to notify about the input text's value

Having trouble retrieving the text from a simple <input id="editfileFormTitleinput" type="text>. Despite my efforts, I am unable to alert the content within the input field. This is the code snippet I've attempted: $('#editfileFormTitleinp ...

javascripthtml

Issue with border spacing functionality

I'm having some difficulty with my border spacing in CSS. No matter what size I specify, it doesn't seem to have any effect. I just want to use a border for the top line. Here is my CSS: p { border-spacing: 5000px; text-align: right; ...

javascripthtmlcss

The navigation menu is stuck and will not toggle

I'm having trouble getting the button to toggle the nav bar to work properly. I've gone through similar questions and checked my html, but still can't figure out the issue. Any help would be greatly appreciated! Although I can see all the l ...

htmlbuttonnavigationbartogglebutton

Eliminate jQuery's delayed blinking effect with the use of an event

Utilizing the mouseenter and mouseleave events, I have implemented a functionality to add a button (not actually a button) to an <li>. However, there seems to be a problem with my code. The button appears and disappears on mouseleave and mouseenter, ...

javascriptjqueryhtmlcss