CSS

41K

Solutions

15K

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

Record
I am using the "each statement" with the handlebars template engine in node.js.  Unfortunately, each record is being tabbed to the right of the previous one, as the attach image shows. I would like each record to line up evenly.
Please see the code:

Here is the file:gigs.handlebars

{{#each gigs}}
<section id="gigs" class="container">
<!--<h1>All Gigs</h1>-->
<h1>{{equipment_area}}</h1>
<div class="gig">
      <h3>{{title}}</h3>
      <!--<p>{{manufacturer}}</p>-->
      <ul>
        <!--<li>Budget: {{budget}}</li>-->
        <!--<li><a href="mailto:{{contact_email}}" class="btn btn-reverse">Apply Now</a></li>-->
        <li>Equipment Type: {{equipment_type}}</li>
        <li>Manufacturer: {{manufacturer}}</li>
        <li>Model Number: {{model_number}}</li>
        <li>Serial Number: {{serial_number}}</li>
        <li>Condition: {{severity}}</li>
        <li>Comments: {{general_comments}}</li>
                
      </ul>
      <!--
      <div class="tech">
        <small>Technologies Needed: <span>{{technologies}}</span></small>
      </div>
      -->
    </div>
    {{else}}
     <p>No gigs available</p>
    {{/each}}
</section>

Open in new window


Please also see the css file:
@import url('https://fonts.googleapis.com/css?family=Lato');

:root {
  --primary-color: #568c9b;
  --primary-hover-color: #64a5b7;
  --bg-color: #333;
  --box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.7);
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato',

Open in new window

0
Should you be charging more for IT Services?
Should you be charging more for IT Services?

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!

css text aligned incorrectly.. I have picturemessage_cb0p1v4e.k0q.pngpicturemessage_cb0p1v4e.k0q.png but I need picturemessage_1km25d11.rtm.png instead.. so the one with the checkmarks needs to line up like the second image.

Thank you very much
0
Hi Experts,

Steps to reproduce:

1. Open link fiddle
2. click on popover button.
3. popover appears, drag this to the bottom till vertical scroll bar appears.
4. drag down the vertical scroll bar than popover will go back under the button.
5. click again button, the popover will disappear.
6. Click again on button, the popover will appear to the location where the user left it earlier.

expected behavior: when a user drags down vertical scroll bar, popover should not go under the button rather stays there exactly where it is left.
0
Problem with flexbox or html code.

I am creating a webpage for the first time. My question is about using flexbox and css. I do not know how to use this and every example that I follow fails.

This is what I have so far:

my html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="flex-header">
        HEADER
    </header>
    <main class="flex-main">
        <nav class="flex-nav">
            SIDENAV
        </nav>
        <article class="flex-article">
            MAIN CONTENT
        </article>
        <aside class="flex-aside">
            SIDEBAR
        </aside>

    </main>
  <footer class="flex-footer">
    FOOTER
</footer> 
                   
</body>
</html>

Open in new window


my css file:

* {
    margin: 2px; 
}
body {
    font-size: 24px;
    color: white;
    height: 100vh;
    text-align: center;
}
.flex-header {
    background-color: #5070B5;
    padding-top: 3rem;
    padding-bottom: 3rem;   
}
.flex-main {

}
.flex-nav {
    background-color: #B95F21;
    padding-top: 3rem;
}
.flex-article {
    background-color: #81A43C;
    padding-top: 3rem;
}
.flex-aside {
    background-color: #B95F21;
    padding-top: 3rem;
}
.flex-footer {
    background-color: #5070B5;
    padding-top: 3rem;
    scroll-padding-bottom: 3rem;
}

Open in new window

0
I'm trying to center a card both horizontally and vertically with a sticky footer, every-time I get the card centered the sticky footer content covers the card.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles -->
<style type="text/css" media="all">
/* Sticky footer styles
-------------------------------------------------- */
html {
	position: relative;
	min-height: 100%;
	height: 100%;
}
body {
	/* Margin bottom by footer height */
	margin-bottom: 60px;
	height: 100%;
}
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: 60px;
	line-height: 60px; /* Vertically center the text there */
	color: #999;
	padding-left: 65px;
}

/* CSS only for examples not required for centering */
.container {
    height: 100%;
}
	.container-fluid {
    height: 100%;
}
</style>
</head>

<body>
<!-- Begin page content -->
<div class="container">
<div class="row h-100">
        <div class="col-sm-12 my-auto">
			<div class="card card-block mx-auto" style="width: 520px;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up 

Open in new window

0
How would I go about hiding only the word "by" in the following block of HTML using CSS ?

<p class="author-info">

	<span> 
	
		by <span class="blue">Joe Schmoe</span> 
		
	</span>

</p>

Open in new window


I've tried the following, .. but I can't seem to get it to work:

p.author-info span { display:none; }
p.author-info span span.blue { display:block!important; }

Open in new window


What's the trick?  Is this even possible?  

Thanks,
- Yvan

p.s. Note that this is dynamically generated code within a commercial WordPress theme, .. so modifying the HTML code directly isn't really an option .. at least not without creating problems.  That's why I'm trying to use a simpler CSS based approach.
0
0
http://makandainn2019.staging.wpengine.com/
I'm having trouble figuring out the correct css to remove the extra white space above and below the menu/logo in the header on this site in mobile view.
ScreenshotCould I get some help please?
0
http://146.66.113.175/~techgard/ix-storage/ What is the simplest way to make the bullets a black disc instead of these checkmarks? I see that it seems to be using an icon. Thanks!
0
If you take this page: https://www.magickitchen.com/test-bounce.html and test it on Google's mobile tester: https://search.google.com/test/mobile-friendly?url=https%3A%2F%2Fwww.magickitchen.com%2Ftest-bounce.html  You will see that the page isn't mobile friendly.

With the help of some experts here, I was able to narrow that down. By removing the classes  animated bounceInDown  from the orange circles under How it Works, the page becomes mobile friendly again.

Is it possibly just this css on bounceInDown? transform: translateX(400px);

I hope that is enough information, thanks.
0
Build an E-Commerce Site with Angular 5
LVL 13
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

https://www.cortho.org/dr-vedant-vaksha-md/
On the tabs sections, there is a white line showing in spots on the bottom area of the tabs, but it should be #004279.
ScreenshotI can't seem to pinpoint the correct css to fix that - could anyone help please?
0
https://search.google.com/test/mobile-friendly?id=vrughLHv7-LfXilg5Zu_Ng  that test says the page isn't mobile friendly, and the screenshot shows this:


Capture.JPG
But I can't replicate that in Chrome. It looks fine in Chrome. How can I test and fix this issue? Thanks.
0
Hi,

I d like to pimp my powershell generated html report. I d hope somebody could suggest some changes to my css so it looks more professional (not a designer, more a script er myself).

Thanks!
Below the  css
$HTMLHeader += @"
    <BODY>
<style type="text/css">
    <!--
    body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    #report { width: 835px; }

    table{

    border-collapse: collapse;
    border: 1px solid #FFFFFF;

    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: black;
    margin-bottom: 10px;
    }

    table td{
    border-collapse: collapse;
    border: 1px solid #FFFFFF;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;

    }

    table th {
    border-collapse: collapse;
    border: 2px solid ##FFFFFF;
   
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;

    }

    h2{ clear: both; font-size: 130%; color: black; }

    h3{
    clear: both;
    font-size: 115%;
    margin-left: 20px;
    margin-top: 30px;
    color: brown;
    }

    h4{
    clear: both;
    font-size: 90%;
    margin-left: 20px;
    margin-top: 30px;
    }

    }
   
    button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 25%;
    border: none;
    text-align: center;
    …
0
I am trying to styling navbar.
<body>
  <ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>

Open in new window


my css is like this:
 /* Navbar Styling */
    .navbar {
      list-style: none;
      margin: 0;
      padding: 0;
      background: #4c6ca0;
      overflow: auto;
    }

    .navbar li {
      float: left;
    }

Open in new window


At this point I have this: 0.PNGbackground property is not applied.
when I add "overflow: auto;" it shows the background.

..navbar {
      list-style: none;
      margin: 0;
      padding: 0;
      background: #4c6ca0;
      overflow: auto;
    }
1.PNG
Q1 - First why the background disappeared when "float: left" was added?
Q2 - What does "overflow: auto" here? How come this bring the background back?

Then I added the following:
.navbar li a {
      display: block;
      color: #fff;
      text-decoration: none;
      padding: 15px 20px;
    }

Open in new window

2.PNG
Q3 - It looks like "display:block;" added padding.  When I actually tried to add "padding'. It didn't work.
How come "display:block" added the space around <a>?
0
Hi,

When I execute the following code, the page displays a link in red.
But it's supposed to be black first. I don't know why it follows the color in a:visited.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed&display=swap" rel="stylesheet">

  <style>
    a {
      color: black;
      text-decoration: none;
    }

    a:hover {
      color: coral;
      text-decoration: underline;
    }

    a:visited {
      color: red;
    }
  </style>
</head>

<body>
  <a href="#">Click Here</a>
</body>

</html>

Open in new window

click.PNGThis is when the page is first loaded.

Why doesn't it show the link in a black color?
0
1. Use link https://jsfiddle.net/girinishantg/w9cgzayj/72/
2. click on popover button.
3. popover appears, drag and drop anywhere on the screen
4. now click twice the popover button, the popover will disappear and then on the second click reappear.
5. popover appears again on the same location where left earlier.
6. But for a fraction of second flickering happens.
 
Is there any way to avoid this flickering, please suggest?
0
http://146.66.113.175/~techgard/  the footer is full width,

http://146.66.113.175/~techgard/design-engineering/  the footer is not full width, although the css tells it to be.

I tried a new page, Elementor full width, and it still is narrow.

I made the design-engineering page full width, and then had to stretch the sections, but the footer doesn't allow that. Theme is gridlab, but the customize section doesn't help.
0
I am having difficulty with responsive web page on smart phones.
I cannot seem to get the left margin right.
I want the page to be left aligned and not have so much whitespace and the text/buttons to be smaller.
I also have the problem with Chrome retrieving a new page each time.
So, I did some research, and found that if I used the following line -

<meta name="viewport" content="width=device-width, initial-scale=1">

Open in new window


it should clear the problem up with Chrome.  But it is not working for me.
I have two css pages - and I was using just the following coding in my html pages:

<link rel = "stylesheet" type = "text/css" href = "../rainbowservicedogs/css/rwdgeneral.css" />
<link rel = "stylesheet" type = "text/css" href = "../rainbowservicedogs/css/rwdcss.css" media="screen and (max-width:500px)"> 

Open in new window


I have attached the css files and the main page...  
the web site link is: www.htpp://mjsayers.com/index.html
Thank you in advance for any help and suggestions.
index.html
rwdcss.css
rwdgeneral.css
0
I have a View using a Grouped DataTable like this:

@model List<master.Models.tbl_Data>


<table class="DTStyle filteredgroupedtable_14">
    <thead>
        <tr>
            <th>
                Field 2
            </th>
            <th>
               Field 1
            </th>
            <th>
                Field 3
            </th>
            <th>
               Field 4
            </th>
            <th>
                Field 5
            </th>
            <th>
               Field 6
            </th>
            <th>
               Field 7
            </th>
            <th>
                Field 8
            </th>
            <th>
                Field 9
            </th>
            <th>
               Field 10
            </th>
            <th>
                Field 11
            </th>
            <th>
               Field 12
            </th>
            <th>
                Field 13
            </th>
                    </tr>
    </thead>
    <tbody>
        @for (int j = 0; j < Model.Count; j++)
        {
            <tr>
                <td>
                  @Model[j].Field2
                </td>
                <td>
                    @Model[j].Field1
                </td>
                <td>
                    @Model[j].Field3
                </td>
                <td>
                    @Model[j].Field4
                </td>
                <td>
                    @Model[j].Field5
                </td>
                <td>
                    

Open in new window

0
Learn SQL Server Core 2016
LVL 13
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

I'm trying to fix an annoying CSS bug on a WordPress site that I'm developing and am hoping that someone here can help me.  If you view this page in either Firefox, Edge, or IE11 and scroll down to the bottom -- you'll notice that the 2 social icons are being displayed to the right of the 3 links (ie: Privacy Policy, Terms of Use, Sitemap).  

https://rgc.touchstoneliving.com/

This appears to be being achieved using this CSS rule:

.widget-pages ul {
    list-style: none;
    columns: 2;
}

Open in new window


... where "columns: 2" is suppoedly splitting the 5 different list items into 2 separate columns.  

However, .. if you view the same page using either Chrome or Opera, ..the Instragram social icon is for some reason being displayed at the bottom of the first column instead of at the top of the 2nd column.   My assumption was that the CSS would try to evenly split the 5 different list items into the 2 different columns - with the first 3 list items being displayed in the 1st column, and the remaining 2 in the 2nd column.  But obviously this isn't the case.

How can I fix this?  Is there any way that I can tweak this CSS rule somehow so that it forces the last 2 list items to be displayed in the 2nd column (in Chrome and Opera)? If so, how?

- Yvan
0
My site uses a manual carousel which must be swipped horizonally. It works, but the swipe action causes the whole page to move slightly in addition to the carousel.  Annoying right?

I found a line of code below that disables the whole page from moving...
overflow-x:hidden

Open in new window

But this creates a new problem. There is some sort of bug or conflict with how this line of code interacts with my contact form field input.  On some mobile phones, the input is briefly invisible making it difficult to fill out the form.  When I disable this line of code, it fixes that problem.  I verified this through process of elimination.  

But I still need a way to scroll this carousel  without the whole page moving slightly.  This is mainly on mobile phones, because on larger screens the horizonal movement does not happen.  

Perhaps there is a Java script alternative to prevet the page from moving?  

Feel free to test site HERE.  Enter site>menu>Services  and try to scroll on a mobile phone to see what is happening.
0
Trying to make a draggable popup, provided below is the code which works fine but is not perfect that is I am able to drag the popover but the moment I take the popper below screen mouse up event does not fire and popper does not come-up smoothly. Can any expert help in handling the popper smoothly.

Appreciate your early response.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        div { width: 200px; height: 200px; border: 1px solid black; }
    </style>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script language="JavaScript" type="text/javascript">
        $(document).ready(function () {
            var $dragging = null;
            $('#demo').on("mousedown",
                function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).attr('unselectable', 'on').addClass('draggable');
                    var parentOffset = $(this).offset();
                    var el_w = $('.draggable').outerWidth(),
                        el_h = $('.draggable').outerHeight();
                    console.log(parentOffset);
                    var relX = e.pageX - parentOffset.left;
                    var relY = e.pageY - parentOffset.top;
                    console.log(relX + ' / ' + relY);
                    $('#demo').on("mousemove",
                        function(e) {
                            if ($dragging) {
                                

Open in new window

0
I am building a website.  I noticed that when entering text in the contact form from mobile phones there is this odd delay, anywhere from 1-10 seconds before the letters or words I typed appears.  On my computer and laptop it is fine, no lag.  On my iphones 10 and 7, I tried safari, chrome, and edge...they all do it.  

It's a fairly straight forward contact form, uses php on the back end.  The server resources are good. Internet connection is fast, just wondering what would possibly cause this lag only on mobile.

Not really sure where to start.  Should I be looking for in CSS config?
0
I have inputted the following into a textarea and saved to the database as is. (see screenshot )hrs

In React I am outputting it to the frontend like this:

                <ul>
                  {this.state.contactDetails.hours
                    .split("\n")
                    .map(function(item) {
                      return (
                        <li>
                          {item}
                        </li>
                      );
                    })}
                </ul>

Open in new window


I am using an unordered list but could use span tags with line breaks too. I want to be able to make it look bit better ie: have even spacing after the colon. Is this possible  since I am not getting the day and the time separately. Best case scenario would be for the day to be floated left and the times to be floated right.
0
Hello Everybody.

I'd like to know how to tag and style with css and classes etc that includes strike through text, color changes and font size change -- via css stylesheet for an html page.

Here's the graphic that my client sent me -- and now I need to use css to style it via a style sheet, compatible with modern browsers.  See how the bundle price is larger than the other font sizes.  
I assume this all needs to be put into an overall div with perhaps sub divs within it.

Looking foward to your solution-- I can fine-tune the sizes once I get your css framework.

Thanks
Rowby
Need to do this in regular text (not a graphic) using css in a style sheet
0

CSS

41K

Solutions

15K

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.