What steps should I take to adjust the text size in my media query?

I'm facing a challenge with a media query to decrease the font size of a text. It seems like a straightforward task, yet I can't pinpoint the issue.

HTML:

<div class="fp-featured">
<div class="fp-title">TITLE</div>
<p class="text1 inline-edit-editable">Text 1 here<br />
<span class="text2" style="font-size: 56pt;">Text 2 here!</span></p>
</div>

CSS:

@media only screen and (max-width: 600px) {
.fp-featured > span {
font-size: 12pt;
}
}

Attempted targeting just the span class as well

@media only screen and (max-width: 600px) {
.text2 {
font-size: 12pt;
}
}

Despite resizing the window, the text size remains unchanged. I'm uncertain whether the class declarations are incorrect or if there's an issue with the order, but I'm struggling to achieve the desired text reduction.

htmlcss

Answer №1

Your text2 element is currently using inline css, which takes precedence over your regular stylesheet css. To give priority to your stylesheet css, you can use the !important rule.

@media only screen and (max-width: 600px) {
.text2 {
font-size: 12pt!important;
}
}

Alternatively, you can define the initial text size in your stylesheet and remove the inline style declaration from your html code.

Answer №2

Include your CSS styles externally and eliminate the inline styles. Here's an example

.header {
   color: #333;
   font-size: 22px;
}

Answer №3

There are a few mistakes in your code that need to be addressed.

  1. By applying inline css to span, you can only override it using a css property with !important. For example: font-size: 12pt!important;
  2. .fp-featured > span will only target span elements within .fp-featured. If you want to target all descendants of .fp-featured, use .fp-featured span.

It is recommended to remove the inline css and replace it with the following css:

.fp-featured span {
    font-size: 56pt;
}

@media only screen and (max-width: 600px) {
    .fp-featured span {
        font-size: 12pt;
    }
}

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

I am experiencing difficulties with my custom font not functioning properly

I've experimented with the following code: @font-face { font-family: Jua; src: url('/fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('..../fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('.../fonts/jua.t ...

cssfonts

transition-duration is ineffective in a particular div

Whenever I hover over the purple text, I want it to increase in size using the zoom property. Here is an example: I am facing two issues: The time duration does not seem to work even when I try to apply it within the hover and non-hover classes. Wh ...

htmlcss

Toggle button in VueJS that dynamically shows/hides based on the state of other buttons

In my table, I have included options for the days of the week such as Everyday, Weekdays, and Weekend. Each row contains 2 select items to choose start and end times for updates. Additionally, there is a toggle button at the end of each row that enables or ...

cssvue.jstoggleshow-hide

I am encountering an issue where the characters "£" is displaying as "£" when my HTML is rendered. Can anyone explain why this is happening?

Here is the code I'm having trouble with: http://pastebin.com/QBLeLyNq. For some reason, the "code" part isn't working correctly. Any help would be appreciated. I used to run a small business and had a profit of £145 with an investment of only ...

htmlcssencoding

How can the height of a Material-UI Grid item be dynamically set to match its width?

I am trying to create grid items that are square, where the height matches the width: const App = ({ width, items }) => ( <Grid container> {items.map((v) => ( <Grid item md={width}> // I want this Grid item to be square ...

cssreactjsmaterial-ui

The combination of using p:inputText within p:layoutUnit does not function properly when placed inside p

Recently, I encountered a problem with a modal dialog that contains some input components. The issue arose when I implemented a p:layout within the dialog. Initially, the p:inputText component within a p:layoutUnit functioned properly and gained focus. Ho ...

cssprimefaces

What is the best way to combine multiple classes when declaring them in CSS?

I'm attempting to combine the following code snippets (possibly misunderstood the term) - is there a way to have them both perform the same function without creating another class with identical attributes? .games span { display: inline-block; ...

cssclassconcatenationhtml

What is the best way to ensure a grid element has a column designated for each of its children?

Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...

htmlcss

To access a form element in JavaScript function, utilize the dynamic form name approach

Currently, I am facing an issue with a JavaScript alert function where I am trying to view the HTML form URL before it is submitted. Following advice from a post on StackOverflow about retrieving form submit content before submit, I attempted to implement ...

javascriptjqueryhtmlformsfunction

When Vue 3 is paired with Vite, it may result in a blank page being rendered if the

Issue with Rendering Counter in Vite Project After setting up a new project using Vite on an Arch-based operating system, I encountered a problem when attempting to create the simple counter from the Vue documentation. The element does not render as expec ...

javascripthtmlvue.jsvuejs3vite

Fuzzy text upon scrolling in Internet Explorer version 6

Having a problem with text in Internet Explorer. When the page initially loads, the text appears clean and sharp. However, when I double-click on some white space of the page, the text becomes distorted as shown in the following image: Click here for alt ...

htmlcssinternet-explorerinternet-explorer-6

What is the correct way to utilize window.scrollY effectively in my code?

Is it possible to have a fixed header that only appears when the user scrolls up, instead of being fixed at the top by default? I've tried using the "fixed" property but it ends up blocking the white stick at the top. Adjusting the z-index doesn&apos ...

cssreactjstypescriptnext.js

In order to avoid conflicts, please update the version code of your APK as there is currently one with version code 1. How can I go about changing the version?

My attempt to upload an apk file on Google Play has hit a roadblock. The apk file was created using Unity3D. Google Play is giving me an error message stating that I need to use a different version code for my APK because a version with code 1 already exis ...

androidcssgoogle-playgoogle-play-services

Executing a function within a ng-repeat iteration

Is there a way to call a method within an ng-repeat loop, even if the element does not exist at that moment? I'm facing this issue and I'm not sure how to resolve it... The ID seems to be correct. Strangely, when I run it in the console after ev ...

javascripthtmlangularjs

Leveraging font awesome ttf in conjunction with scss

I am currently attempting to incorporate Font Awesome with SCSS. @font-face { font-family: 'awesome'; src: url('../../fonts/font-awesome/fa-light-300.ttf') format('ttf'); } Although the path appears to be correct, I am ...

csssassfont-awesome

I'm curious to know why my jQuery function fadeOut is functioning properly while slice isn't working as expected

I'm trying to create a button that displays three consecutive posts After clicking on "view all", the three "div" elements should become visible I'm attempting to use jQuery to make the three 'div' elements appear when the view all bu ...

javascriptjqueryhtml

How can I personalize the preview feature in a Bootstrap rich text editor?

Currently, I am utilizing Bootstrap's rich text editor by this method $('#editor').wysiwyg();. Utilizing AJAX, I am passing the HTML content created by .wysiwyg to save it in the database. Later on, I plan to retrieve the saved HTML data to ...

jquerycsshtmlbootstrap-4rich-text-editor

What is the best way to add custom styles to Material UI tabs in a React application?

I need help styling my material UI tabs within a react component. I am having trouble getting the styles applied correctly, specifically setting the background color and box shadow of the entire bar, as well as defining the indicator background color and u ...

cssreactjsmaterial-uinavigation

Utilizing Ajax Blob URL for Audio Streaming

My goal is to retrieve audio data using an Ajax request and load it into an audio element. However, I'm running into an issue where the player does not seem to work properly. The play button remains disabled as if nothing has been loaded. Below is a s ...

htmljqueryajax

Steps for positioning an image to overlap the background image

Do I need JavaScript or is HTML and CSS sufficient? If so, should I utilize position or other properties for that? If my description is unclear, a visual demonstration in the form of an image might help. ...

htmlcss