I need some help reducing the size of my commerce titles in the responsive version. I've tried using CSS, but nothing seems to be working. Currently, this is what I have for the main slider text:
@media only screen and (max-width: 600px) {.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {font-size: 22px;;}}
You can check out my website and see the issue for yourself. Click here for an image description.
Can anyone help me figure out where I'm going wrong?
The current path for your CSS is as follows:
@media only screen and (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px;;
}
}
It is difficult to determine without seeing the associated HTML, but it appears that the existing classes applied may have a higher priority than your new media query. One suggestion is to add !important to the font size declaration. If that doesn't work, consider making your selector more specific.
@media (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px !important;
}
}
Here are some interesting points to consider about selector priority:
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: Inline styling automatically takes precedence (1000 points)
If there are conflicting styles, the browser will always choose the one with higher weight. The order of your stylesheets only matters when priorities are equal, which is why overriding Bootstrap can be challenging.
Currently, your media query CSS selectors have a weight of 20 points due to the presence of 2 class names affecting the change.
Using !important will force a declaration to override others within the same cascade layer and origin. While not recommended, it can be effective in certain situations.
Having a simple unordered list of links and using pseudo elements to generate numbers for the list, I encountered an issue with centering the number vertically within its circle background in Internet Explorer 11. Here is the HTML code: <ul> < ...
Currently utilizing Wordpress, but I believe my inquiry pertains to any platform where users are granted frontend posting capabilities. I am interested in enabling users to customize the style of their posts, specifically limited to the description area. ...
Trying to structure some CSS in order to create a website that resembles the layout of a typical desktop application: Almost there, but struggling to make the scrollable panel stick to the bottom of the viewport and show a scrollbar instead of overflowing ...
While my website loads perfectly in Chrome and Firefox, I have been experiencing issues with Internet Explorer 11. The CSS is not fully applying until after pressing Ctrl+F5 multiple times. It's strange because some of the CSS is being applied but cer ...
Looking to use the pseudo selectors :before and :after to create a border around a div with images, but running into some issues. The :after image is not positioning correctly on the right side of the element and the text is dropping below the image. Check ...
I've been struggling with this issue all week. I have a CSS dropdown menu that uses both standard lists and content boxes as sub menus. The problem lies in IE, where each LI has an anchor tag that is set to display block in order to fill the parent LI ...
I'm currently working on creating a Shopping Cart using HTML, CSS, JavaScript, and JQuery. The idea is that when you click "Add to Cart" for the orange item, most of the HTML elements will disappear, leaving only the table displaying the Shopping Cart ...
I'm currently working on a website project for a client who specifically wants to include news from the BBC. Despite spending 3 hours searching online, I haven't been able to successfully insert an XML file into an iframe and style it to the clie ...
After creating a website some time ago, I decided to make it responsive by adding a menu. However, I encountered an issue where the menu bar opens but immediately closes after showing the entire list. Here is the HTML code for the menu: <!-- start men ...
Currently, I am utilizing Jquery UI for a pop-up feature that displays a table populated through an Ajax call. The script implementation is as follows: <script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { ...
<body ng-controller="myCtrl"> <input type="checkbox" ng-model="loaded"/> <select ng-model="list"> <option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.id}}</option> </select> {{list}} &l ...
I am looking to create a component that offers users a list of selections with the ability to make only one choice at a time. The mat-radio-group functionality seems to be the best fit for this, but I prefer not to display the actual radio button next to t ...
Is there a way to halt my animation at the 100% keyframe? What I'm attempting to accomplish is animating these boxes so that when you click on the top one, it moves to the bottom and vice versa. Any suggestions or ideas on how to achieve this? <h ...
Newbie to HTML and CSS here! I'm attempting to achieve a design similar to this: https://i.sstatic.net/HyiP3.jpg Below is my code snippet: <div id="topbar"> <div class="image"> <img src="images/ghwlogo.png"> </ ...
As a beginner, I'm facing a rather embarrassing situation here. Picture me banging my head on the table level of embarrassment... but let's give it a shot anyways. I've got a navigation bar and an image underneath (not behind). Both seem to ...
An HTML structure was provided which includes a section with an id of "main-content" and a class of "photo-grid". Inside this section are multiple div elements with a class of "col-1-4", each containing a link, paragraph, and image. <section id="main-c ...
I am currently designing a layout that includes a side menu and a top navbar using Bootstrap 4. My goal is to have the side menu extend from top to bottom and the top navbar stretch from the side menu to the right edge of the screen. How can I achieve th ...
I've implemented scroll animations on various elements of a website I'm constructing. The CSS rules I'm utilizing are as follows: .hiddenLeft { opacity: 0; filter: blur(5px); transform: translateX(-090%); transition: all 1s; ...
While experimenting with CSS, I encountered a challenge in creating a simple horizontal stack of words. It seems impossible to align the content of one div in the center while the other div is empty. For example, I tried doing this in Chrome and here is t ...
When using the "tel" attribute in an input, we can set a maximum or minimum length for the input. However, the drawback is that it allows for all types of inputs, whether numeric or alphabetic. On the other hand, if we use the "number" attribute for the i ...