CSS

41K

Solutions

16K

Contributors

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

Can you tell what is preventing this website from displaying correctly on mobiles?
https://azfreight.club
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.
0
Python 3 Fundamentals
LVL 19
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

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!

~Alla
0
Hello!
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
0
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:

Capture.JPG
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.
0
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;
}
}
0
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.
0
Hi,

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">
                                                <tr>
                                                    <td>
                                                        <a id="RuleMenuDiv" href="../Rule" style="color:#0144af;">Rule</a>
                                                        </td>
                                                </tr>
                                                <tr id="BlendedMenu"> 
                                                    <td style="background-color:#5cb85c; color:#fff;font-weight:bold;">
                                                        Blended
                                                    </td>
                                                </tr>
                                                <tr id="InpatientMenu">
                                                    <td style="background-color:#5cb85c; color:#fff;font-weight:bold;">
                                                        Inpatient
                                                    </td>
                                                </tr>
                                                <tr id="OutpatientMenu">
                                                    <td 

Open in new window

0
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... ?
0
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,
Pooja
0
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>
            </object>
        </div>

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>
            <div style="margin-top: 6px; padding: 3px 0px 3px 6px; background-color: #e5e5e5;">
                Past Editions
           </div>
            <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/2018/CIDD_Newsletter_Issue_November_2018.pdf" 

Open in new window

0
Ensure you’re charging the right price for your IT
Ensure you’re charging the right price for your IT

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!

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": [
            "@currentField",
            "Green"
          ]
        },

Open in new window

0
I am creating the menu. The third row has 3 columns. However, the first column is hidden for some reason and I can not figured out how to make it to appear again

http://www.pcoltools493.com:81/
0
Hi,

I'm asking a more refined Question, as suggested, after my other JS / css Q strayed...

I'm trying to connect an html that loads javascript code that is wrapped in a css style sheet.

The code works as I want it for now in jsfiddle, a mutalisk flight exercise, point and click movement. Small movement point and click works.
But I cant load it in Xcode IDE, or a browser, the same way. (no big, black rectangle border appears, as in the css, and the mutalisk doesn't move)
I need to know how to explicitly connect a style sheet with javascript.
The jsfiddle working initial html, css and JS code is here

In xcode, the mutalisk flies, but can't be click-moved, like in jsfiddle.

No black rectangle - means that the CSS isn't connecting.
I found this page below on how to explicitly include a style sheet into javascript. Nowhere in the jsfiddle code does the stylesheet get loaded.
Is this, below, the best/correct way to go?

here
?
Thanks
0
Hi Experts,
How to add background colour for SharePoint 365 LIST
0
I need to have the mobile menu wider.  It's putting page names on two lines instead of one.

www.schuremediagroup.com


<body class="blog-standard home-demo-2">
<!-- PRELOADER -->
<div id="preloader"><div class="loader"></div></div>    
<!-- START HEADER SECTION -->
<section id="header">
    <!-- START MENU SECTION -->
    <div class="nav-menu nav-demo-1">
        <!-- NAV BAR BACKGROUND IMAGE-->
        <div class="section_bg_image" style="background-image: url(resources/images/01_Home.png)"></div>
        <!-- START NAV BAR-->
        <ul class="nav flex-column section">
            <li class="nav-item">
                <a class="nav-link" href="index.html">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="21-Services.html">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">Videos</a>
                <ul class="child-item">
                    <li class="dropdown-child-item">
                        <a class="nav-link" href="06-Videos.html">Video List</a>
                    </li>
                    <li class="dropdown-child-item">
                        <a class="nav-link" href="07-Newest-Video.html">Newest Video</a>
                    </li>
                </ul>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="09-Music.html">Music</a>
            </li>
            <li 

Open in new window

0
Hi,

Where can I download bootstrap-multiselect.css and bootstrap-multiselect.js

I don't like to point to a different site to read those files
I like to have them in my folder.

Can you please help me find a site where I can save those two files to my folder.

I have search the web for hours and can't find a download to those files.

<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
      rel="stylesheet" type="text/css" />

<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
        type="text/javascript"></script>

Open in new window


Thank you for your help,
Lulu
0
Trying to get a spinner to show while the page is loading,,,,not working.  I think that it's conflicting with the other preload CSS.  Just a thought.

http://mediascrubber.com/

</head>
<body class="gallery-single-gallery home-demo-2">
<!-- PRELOADER -->
<div class="loader">Loading...</div>
<div id="preloader"></div>
<!-- START HEADER SECTION -->
<section id="header">
    <!-- START MENU SECTION -->
    <div class="nav

Open in new window


$color-background: #eaecfa;
$color-loader: #ce4233;

body {
  background: $color-background;
}

.loader {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: $color-loader;
  letter-spacing: 0.2em;
  
  &::before, &::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: $color-loader;
    position: absolute;
    animation: load .7s infinite alternate ease-in-out;
  }
  
  &::before {
    top: 0;
  }
  
  &::after {
    bottom: 0;
  }
}

@keyframes load {
  0% { left: 0; height: 30px; width: 15px }
  50% { height: 8px; width: 40px }
  100% { left: 235px; height: 30px; width: 15px}
}

Open in new window

0
I have an error in my css that I am not sure how to fix.  It is the line that has all of the "#'s" beside it. Because of the error I can't save the css without a message that says it may break my site.  The site is https://www.henricomg.org

Here is the code

#logo {
margin-bottom:-157px;}

div#masthead {
	margin-top:-160px;
}
a{
	text-decoration:underline;
}
p{font-size:16px;}

#logo {
width: 1024px;
}
#logo img {
max-height: 198px;
}

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
} 
 .header-main {
    height: 296px;
}

/*Acco*/
.ac-container {
    max-width: 400px;
}

.ac-container label {
    height: 30px !important;
    line-height: 21px !important;
    font-size: 12px !important;
    font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px

Open in new window

0
I have the following basic format:

<ul>
   <li>link1</li>
   <li>link2</li>
   <li>link3</li>
</ul>

All I want is to put a link after the top lis (not the bottom one)

So end result will be

link1

_________


Link 2


__________


Link 3        




(no line here)

I don't know how to get the lines there, or how to avoid the last one from displaying (I'm guessing last-child)
0
Starting with Angular 5
LVL 19
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

This page works fine except for the blue signature wont reduce in size on a mobile device.

http://www.mediascrubber.com/21-Services.html

Any thoughts or suggestions would be helpful, thank you.

<div><img src="resources/images/YNSScript.png" alt="Sign" longdesc="resources/images/YNSScript.png"> </div>
</div>

Open in new window


I tried this...which worked on another site.  Perhaps I am missing some code.
<style>
	.imgkj3 {
    display: block;
    margin: auto;
}
	.album {
	width:960px;
	margin: auto;	
		
	}
    .size {
		width: 60%;
	}
    
    </style> 

Open in new window


div>
                        <img src="resources/images/YNSScript.png" class="imgkj3 visible-sm visible-md visible-lg"alt="Sign" longdesc="resources/images/YNSScript.png">
                        <img src="resources/images/YNSScriptSmall.png" class="imgkj3 hidden-sm hidden-md hidden-lg"alt="Sign" longdesc="resources/images/YNSScriptSmall.png">
                         </div>

Open in new window

0
I need to remove the hover effect on the menu item "Resources" the website is https://www.henricomg.org

I have tried this code

 
.nav-menu li#menu-item-50:hover > a
{
color: inherit;
}

Open in new window


but there is no change provided I am using the right menu number.
0
The bottom part of the image is getting cut-off.  I tried making the image less high.   That did not work.  Any help is appreciated.

<div class="standard-post-item">
                    <div class="featured-image">
                        <a href="11-Blog-Single-Post.html">
                            <div class="featured-overly"></div>
                            <img src="resources/images/TeamSchure.png" alt="Team Schure">
                        </a>
                    </div>
                    <div class="post-text">
                        <div class="post-heading">

Open in new window


http://www.mediascrubber.com/21-About-Us.html
0
http://www.mediascrubber.com/09-Legacy.html

The Legacy section is how it should be.  The event section does not react the same way.  Its doing a vertical stack.  Any solutions to this? Please.

<!-- START SINGLE GALLERY SECTION -->
<section id="single-gallery">
    <div class="section">
        <div class="grid">
            <div class="grid-sizer"></div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Julio.png" alt="Julio Iglesias"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Amel.png" alt="Amel Larrieux"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Kelly.png" alt="Kelly Rowland"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Bennet.png" alt="Tony Bennet"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Adele.png" alt="Adele"></a>

Open in new window

0
Last photo at the bottom on the left is huge.  What code is controlling this?  I want three small across the bottom.
http://mediascrubber.com/09-Legacy.html
<section id="single-gallery">
    <div class="section">
        <div class="grid">
            <div class="grid-sizer"></div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Julio.png" alt="Julio Iglesias"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Amel.png" alt="Amel Larrieux"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Kelly.png" alt="Kelly Rowland"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Bennet.png" alt="Tony Bennet"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Adele.png" alt="Adele"></a>
            </div>
            <div class="grid-item">
                <a 

Open in new window

0
error in my angular hi am geting this error
compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
           placeholder="Add New Task"
           (keyup.enter)="onTaskAdd($event)"
           [ERROR ->][(ngModel)]="addTaskValue"/>
</div>
"): ng:///AppModule/TasksAddComponent.html@5:11
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25961)
    at JitCompiler._compileTemplate (compiler.js:25949)
    at compiler.js:25893
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25893)
    at compiler.js:25806
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)
syntaxError @ compiler.js:2175
parse @ compiler.js:11388
_parseTemplate @ compiler.js:25961
_compileTemplate @ compiler.js:25949
(anonymous) @ compiler.js:25893
_compileComponents @ compiler.js:25893
(anonymous) @ compiler.js:25806
then @ compiler.js:2166
_compileModuleAndComponents @ compiler.js:25805
compileModuleAsync @ compiler.js:25767
compileModuleAsync @ platform-browser-dynamic.js:223
compileNgModuleFactory__PRE_R3__ @ core.js:40263
bootstrapModule @ core.js:40598
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
0

CSS

41K

Solutions

16K

Contributors

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.