Customizing media queries, Overriding styles from parent elements

Currently tackling a responsive website design challenge where I'm dealing with conflicting styles in media queries and parent css.

Here's the CSS from the parent style sheet:

.sec1 p  {

text-align: left;
width: 55%;
margin-left: 8%;
float:left;
margin-top: 100px;
}

On the 768 width devices, here's what I tried:

    .sec1 p  {
    letter-spacing:normal;
    word-spacing:normal;
    font-size: 1.1em;
   width:none!important;
   margin-left:none!important;
   margin-top:none!important;
   text-align:inherit!important;
      }

Attempted to set width to none and remove margins, but not sure if it's the right approach,

Clearly struggling with unwanted styling effects, how can I resolve this?

Hope my question is clear! Thanks for the help!

htmlcssresponsive-designmedia-queriesstylesheet

Answer №1

Using none as the width value is not a valid option.

To reset the item to its default behavior, apply width: auto.

If you want to set the width to zero, use width:0.

Remember that when using !important, there should be a space between the property value and the important keyword. For example:

margin-left: 0 !important;

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

Create a single button that controls checkboxes with the help of HTML, CSS, SCSS, and Bootstrap 4

Is there a way to use only HTML, CSS, SCSS, and Bootstrap 4 to make all checkboxes default to the "on" condition when a button is clicked? Typically, this functionality would be achieved with JavaScript, but due to constraints, I am exploring alternative ...

htmlcssbootstrap-4

How to dynamically reduce the number of columns in a textarea using jQuery according to its content

Does anyone know how to make a textarea shrinkwrap the text inside on blur? The default number of columns is 10 or 15 and I want the textarea to adjust its width based on the text content. I have tried the following code: $('textarea').on(&apos ...

javascriptjqueryhtmlcss

Adding rows to a database can be done by utilizing a dynamic form that consists of both repeatable and unique fields

Here is my follow-up post addressing the issue I previously encountered. Initially, I erroneously used mysql instead of mysqli, but I have now made the necessary updates based on recommendations. I have a form that contains variable sets of fields (rangin ...

phpjqueryhtmlformsmysqli

Ensuring each field is filled correctly in a step-by-step registration form

I have been working on implementing a step-by-step registration form, and I am facing an issue. When I click on the next button, all fields should be mandatory to proceed to the next step. It's crucial for the user experience that they fill out all th ...

javascriptjqueryhtml

When placed within a <li> element, the <a> tag will not create a hyperlink to a page, but it will

I have encountered an issue with my anchor links. All of them are working properly except for the one in the second ul with an href="page1". Interestingly, the link shows the correct destination at the bottom left of my screen and works when I right-click ...

htmlcss

Acquiring a hyperlink using a regular expression from the <a href> tag

Currently utilizing JMeter and in need of extracting a link from the <a href> tag below: <a href="/i/info/14259.html" class="ogrLink">Department page</a> The desired regular expression for obtaining this link is: /i/info/14259.html An ...

htmlregexjmeter

Fetching data within a defined time range in Django

Currently working on creating my dashboard, the design is all set. However, I'm facing a challenge in retrieving specific data sums from my MySQL database. For instance, how can I retrieve the revenue of the last 15 days? models.py class JaGAnalytics ...

pythonhtmlmysqldjango

What is the best way to increase the top padding of an anchor link?

I need to create a padding-top effect for my div when the link to the anchor is clicked: <a href="#myAnchor">Proceed to my anchor</a> ... <div id="myAnchor"> ... </div> The challenge lies in wanting to add the padding only when ...

htmlcss

Which method is more effective: utilizing AJAX to retrieve page elements, or just toggling their visibility?

When it comes to web development, particularly in jQuery, should I preload my page and use jQuery to manipulate the DOM, or should I do it the other way around? This debate involves: <div id="item1" ></div> <div id="item2"></div> ...

javascriptphpjqueryhtmlajax

Summon the keyboard to appear

How do I make the keyboard appear on my website? I have a javascript function that recognizes keyboard input, but I am struggling to display the keyboard on my mobile device. Is there a way to simulate traditional input and generate key events? I should ...

javascripthtmlmobile

Code an AJAX login form using PHP, HTML, CSS, jQuery, and MySQL

I'm struggling with the login functionality on my website. Despite entering correct details, users are unable to log in using their name and email ID. As a beginner in using Ajax, I need guidance on how to troubleshoot this issue. What steps should I ...

phphtmlajaxmysqli

Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Need help with my HTML/CSS code. I have a table where I need to change the background color of any row that has a cell value of "Not Approved" while using a foreach loop in Google Apps Script to send an email with two tables. What is t ...

htmljquerycss

I'm unable to modify the text within my child component - what's the reason behind this limitation?

I created a Single File Component to display something, here is the code <template> <el-link type="primary" @click="test()" >{{this.contentShow}}</el-link> </template> <script lang="ts"> imp ...

javascripthtmltypescriptvue.js

Entry is automatically added to the form as soon as the page is loaded

I am trying to create a form using PHP, but I want the script to only run after the submit button is pressed. Currently, it runs every time the page loads and overloads the box on the same page. Unfortunately, my knowledge of PHP is limited! Any help wou ...

phphtmlformsinputlabel

Discover the secret to halting a CSS animation precisely on the final nth-child in CSS3

I have encountered some difficulty in stopping a crossfade animation on the last nth-child element. Although I am aware of using animation-fill-mode: forwards, implementing it in different places such as in the initial .crossfade declaration did not yield ...

htmlcssanimation

Implement Google Apps Script Array in HTML form for autocompleting datalist suggestions

I have successfully created a Google Scripts function that generates an array from a column in a Google Sheet by filtering out any spaces. However, I'm facing a challenge in figuring out how to pass this variable to my HTML form so that I can set up a ...

javascripthtmlarraysformsgoogle-apps-script

Here's a solution to prevent the "jump" effect when hiding elements in a navbar

Currently, I am facing an issue with my h5 elements within the navbar when scrolling. I am using Bootstrap 4 and jQuery for this project. The problem arises in my navbar where there are four sets containing an icon, followed by an "h5" and then a "p" elem ...

jquerycssbootstrap-4hideelement

Expanding the width of a bootstrap dropdown menu

Looking for advice on how to expand the dropdown width? I have a row with two columns and some JavaScript that handles the dropdown functionality. The issue I'm facing is that I can't figure out how to adjust the dropdown width when it's se ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Customize HTML styles using Angular Material

I've noticed that my index.html file has a lot of style elements when using Angular Material, and I'm not sure why. Here's an example in the header element where different classes are used for Angular Material components. https://i.sstatic. ...

cssangularjsangular-material

Implement a feature in JSP that allows users to dynamically add or remove fields before submitting the data to the database

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- ...

javascriptjqueryhtmlajaxjsp