Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Share tech news, updates, or what's on your mind.

Sign up to Post


Currently my responsive menu will appear at 768px, I want to change it to appear at 993 and I cant find it anywhere in my css or bootstrap navwalker code.

Become a CompTIA Certified Healthcare IT Tech
LVL 19
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Before getting all detailed about how I do this...

Has anyone heard about a problem where if you click the screen while the swirly gig is showing the page loading via an update panel, that the screen loads with munged looking CSS. As opposed to if you let the swirly gig load on the update panel and you don't touch the screen at all during the process, it loads fine?

Seeing if someone says "This is a known issue, all you have to do is..."
I'm sure I won't be so lucky, but worth a shot.

I have a page with a sticky header, when you scroll down, but it gets in the way.

Can anyone help me fix this, so it stays at the top of the page content and doesn't be on top of content so I can read the content?


I have a dropdown list on my partial view dialog box

If I remove the class from the <select> and remove the multiselect

my data will get populated but I need to have my style and populate my data

so if I remove from my select this class:
class="btn btn-default dropdown-toggle"
remove the multselect function:
//    $('#GroupSelect').multiselect(getGroupOptions(true));

then my select box will get populated but I need my style
how can I have my style and populate my dropdown list?

<script >
    $(document).ready(function () {


   function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

        $("#ConditionSelect").change(function (event) {
           // event.preventDefautlt();
            var GetValue = $(this).val();
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, 

Open in new window

Hi Guys, the mobile site we have here for https://holidaysarecoming.net isnt appearing properly in Chrome, it looks fine in FF and incognito Chrome, i thought it could be a cache thing but i have tried purging the cache on Cloudflare and its showing me this, it should be showing like
How do I get rid of the blue border on the active state when clicking on the logo in the upper-left corner to back to the home page?


I already added the following code as an embedded style.

#Map img a:active {
    border: 0;
So all I did was change colors in the default.css file and it worked the first time. I didn't like the color and went change the colors again and no matter what I do it will not apply. I have tried cache, phones, proxy sites etc.

.stitched {
    font-weight: 400

#customize-controls [id*=enigma_theme_option]>h3:before {}

#accordion-section-enigma_more h3.accordion-section-title {
    background: #e91e63;
    color: #fff

#accordion-section-enigma_Rate h3.accordion-section-title {
    background: #579fc3;
    color: #fff

.stitched {
    padding: 20px;
    margin: 10px;
    background: #558a9a;
    color: #fff;
    font-size: 17px;
    line-height: 1.3em;
    border: 2px dashed #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 4px #558a9a, 2px 1px 6px 4px rgba(10, 10, 0, .5);
    text-shadow: -1px -1px #aa3030

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px

.upsell-enigma {
    float: none;
    border: 1px solid rgba(204, 204, 204, .68);
    box-shadow: 1px 2px 2px rgba(0, 0, 0, .2);
    margin-bottom: 20px;
    padding: 10px;
    overflow: hidden;
    word-wrap: break-word;
    background: rgba(255, 255, 255, .6)

.btn-success {
    color: #fff;
    background-color: #3ca3e0;
    border-color: #4cae4c

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.42857143;
    text-align: center;

Open in new window

The main banner image on the homepage is really huge. I'm trying to do some mobile optimizations, and I'm wondering if there is a way to serve two separate images based on viewport size based on my current configuration.  I know how to do that the traditional way, but the way this slider is set up calls the image up right in the slide (line 24) and all the css is set there was well.


I'd be fine with the image I have for lg, but then I'd serve a different sized image for md, sm and xs.
How do I create a custom theme in select2?

I've googled results on using different themes, but not found how to create one.

I found this that uses one:

It contains this code:
$flat-theme-light-color : #48c9b0;
$flat-theme-dark-color : #16a085;

Open in new window

And uses this code to useit:
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above{
  background: $flat-theme-light-color;
  .select2-container--focus .select2-selection--multiple{
    border: 1px solid $flat-theme-dark-color;

Open in new window

But I have questions..
If I wrap any element with:

Open in new window

I tried this:
I put this on my page:
<script type="text/javascript">
        theme: "multiplecheckboxes"

Open in new window

Then in my CSS, I wrapped the element with the theme container so that it would only be triggered for multiple select2s:

/*Styles for Multi-select Checkboxes*/
.select2-results__option:before {

Open in new window

But that doesn't work. It fails to hit that code.

Any ideas on how to create and use a custom theme so that my single selection looks different than a multi selection?

I have an HTML5 bootstrap website that has a video as the background on the home page.

The problem is if that I maximize the screen the video remains smaller. It's not responsive.
How can I make it responsive so that the video gets bigger if the screen gets bigger (I know the quality may be impacted but I am OK with that)

Here is my current code:

<video autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">

Open in new window

I am just using a sample video from the template.
Also, can we modify the code so that it uses a vimeo video instead?
Learn Ruby Fundamentals
LVL 19
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

In Discord when you paste in a link it displays the site's info in your discord screen. On my web site, I want to put a bunch of links in a table on the left, and when I hover over a row, it will display the site's info as shown below, in a panel on the right. Is that possible in CSS or whatever? thanks!

link's info
I'm using the select2 multiselect with checkbox from this example:


The problem is that when I set it up for my multiple select dropdowns, it overrides my regular that don't require checkboxes that are on the same page, because changes require that I override the default select2 css settings.

Is there a way to keep both the dropdown with the checkbox and the dropdown without the checkbox when it's not a multiselect?

Has anyone dealt with this?

Can you tell what is preventing this website from displaying correctly on mobiles?
I am aiming to launch it very soon, but really need to iron out this responsive CSS problem before I do.

Can you tell from your web console what the issue is? - otherwise I can give you access to the CSS and JS files.
It is a WordPress site using custom plugins and a custom child theme.
Thanks for your help.
Hi, I am a web design student, and we have an assignment using less. I have read the online material but I admit it is pretty confusing for a newbie like me. How do I get started? Is there something I need to install? Any clear instructions geared toward the novice programmer would be greatly appreciated!

I've put a logo on my site's homepage and the logo was clickable. And then I adjusted its position through custom.css file, but now the logo is NOT clickable (plain image). How to make it clickable again?
Here's a homepage of my site:
My site's URL
Hi, whenever I add a link from https://magickitchen.com to facebook, the image FB wants to use is this one. https://www.magickitchen.com/cart/img/cart/animated_ellipsis.gif

So I always see this:

Is there a way I can tag that image so it never appears as an option on Facebook? Because sometimes I forget to choose another image, and that ugly thing remains.
on https://techgardens.com, the h3 tags are too small on mobile, something's changing them to 15px. Good example here: https://techgardens.com/privacy-policy/

I tried adding this to custom CSS, and it didn't help. Advice? Thanks.

/*increase size of h3 tags on mobile only*/
@media (min-width: 481px)  {  
h3, .h3-style {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    font-family: Roboto, sans-serif;
    letter-spacing: 0em;
I have created a menu on the desktop view it seems to work just fine when I go mobile or resize the screen something strange start happening. First of all, once resized on the desktop menu does not really load from the first time. Once you get the menu up click on the products and then you would see the list of items they should have a little right angle brackets (missing) . On the top of that menu I should have close and back button it is missing.

Also the once you start navigating through products menu the sub menus shown are not correct

The site is here : http://www.pcoltools493.com:81/
Success in ‘20 With a Profitable Pricing Strategy
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

https://techgardens.com/shop/?product-page=1302  please go here and click add to quote on any product, then go to https://techgardens.com/request-quote/

Can you tell me why the quantity button won't allow you to type into it, or clicking the arrow doesn't increment/decrement the amount? Is there some CSS interfering? Thanks.

It does work here: https://forcepointreseller.com/shop/   https://forcepointreseller.com/request-quote/

On the first site, using wordpress with GRidlabs theme and elementor builder. On the forcepoint site, using Divi builder. On both, using YITH request a quote pro plugin.

How can I make a sub menu using my table menu?

I need a sub menu to Blended or Inpatient or Outpatient.
They each have a submenu. How can I do that?
This is my left menu.

I want on hover over the word "Blended" to list a submenu

 <table class="table">
                                                        <a id="RuleMenuDiv" href="../Rule" style="color:#0144af;">Rule</a>
                                                <tr id="BlendedMenu"> 
                                                    <td style="background-color:#5cb85c; color:#fff;font-weight:bold;">
                                                <tr id="InpatientMenu">
                                                    <td style="background-color:#5cb85c; color:#fff;font-weight:bold;">
                                                <tr id="OutpatientMenu">

Open in new window

I'm looking for a way to add copy/pasted CSS into my existing CSS without affecting what I've already written.
Here's the scenario:

Let's say I have css that reads:

body { .. something here }
h1 { ... }
.. I found some css (cards) that would fit great in my project, however, when I add them, they conflict with stuff already in there. To fix the problem, I tried wrapping everything in the html inside a .container.

My thought was that I could somehow add specificity by saying .container h1 , so it wouldn't conflict with my existing h1.
My question is:

Is there a shortcut to using that .container class in order to include all elements inside it, or do I have to go item by item and do .container h1, .container p, etc... ?
Hi All,
Advance thanks!
i need help in displaying the input text box which shows text as image (like captcha text). I don't want to use recpatcha or any plugins, all need is stylesheet to make text box text to display as image which requires human eye to judge the letters!
<input class="InputField" autocomplete="off" type="Text" name="Question1" id="Question1" size="15" maxlength="10" onPaste="return false;"/>

Kind regards,
Hello. I have a page where I am archiving newsletters.   On the right I have the newsletters listed and to the left I am displaying the most current edition.  The newsletters are just PDF files with multiple pages.  So to display them I used the <object> tag.  This is working but it is displaying the newsletters extremely small.  Even if I increase the width of the div the newsletter stays the same.  Can someone tell me what I'm doing wrong?

This is how I'm displaying the PDF file:
<div class="news_container">
        <div class="pdf_content">
            <object data="../../Newsletter/2019/CIDD_Newsletter_Issue_April2019.pdf" type="application/pdf" width="100%" height="100%">
                <p>Your browser does not support PDFs.
                <a href="../../Newsletter/2019/CIDD_Newsletter_Issue_April2019.pdf">Download the PDF</a>.</p>

Open in new window

This is how I'm displaying the list of newsletters:
<div class="newsletter_list">
            <div style="padding: 4px 0px 4px 6px;">
                <a href="../../Newsletter/2019/CIDD_Newsletter_Issue_April2019.pdf" target="_blank">Current edition (April 2019) &raquo;</a>
            <div style="margin-top: 6px; padding: 3px 0px 3px 6px; background-color: #e5e5e5;">
                Past Editions
            <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/2018/CIDD_Newsletter_Issue_November_2018.pdf" 

Open in new window

Hi Expert,
Any one know how to change background  color in the List  using JSON
I have found using rows but not all the background and heading
For example :
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "color": "#fff",
    "padding-left": "10px",
    "background-color": {
      "operator": "?",
      "operands": [
          "operator": "==",
          "operands": [

Open in new window







Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.