CSS

40K

Solutions

53

Articles & Videos

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

I keep getting "this stylesheet is too minified to process," but all my css stylesheets are internal and not minified. I tried the solution above (allow JavaScript) but the only option I find is 'disable JS when spydering,' which didn't make any difference. Trouble is, Dust-me doesn't tell which stylesheet has a problem... Any advice?
0
Free Tool: Port Scanner
LVL 8
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Look at http://olaffrenecleaningservice.com/

When you shrink the screen down to mobile size you get something like this:

screenshot
I want to put the "free estimate" graphic on its own line and the name of the company on its own line.

I'm seeing some CSS elements that I'm not familiar with ("inherit"). In any case, how can I put these two elements on their own "row" when the screen gets to mobile size?
0
Hi

Pretty basic question here.

What is the HTML and css to make a page 4 columns.  And switch to 2 columns on a cell phone.

Appreciate any help.

Thanks!

Rowby
0
I would like some help with trying to resolve why my CSS is allowing the footer to bleed over the top of it.

First, to understand the problem, please watch this 1-minute video.
GrayBoxSizeIsse.mp4

Then to see this in action, please go to this page:
https://makingyourlifecount.net/player.php?ref=c15.20150717.1

If you shrink the screen height to a smaller size, less than 750 pixels, the gray box is pushed down below to the place where it bleeds into the footer. The footer layer is now on top of the gray box and as such, the gray box is hard to read and the gray box links that are on the footer do not work.

I'm sure it is a simple piece of CSS code or a <div> that needs to be added. Or maybe something with the z-index. But I'm having trouble finding it and would like some help.

Thank you for helping me solve this.
0
When a post is displayed in wordpress wordpress injects some CSS shown below

type-post for a post and type-page for a page see below

Capture.PNG
I want all posts to be formated as type-page how can I achieve this?
0
Dear experts,
I am facing a request from a customer, who maintains about 500 product sheets to different products. So far all the data were kept in Word and PDF files were made manually. Th maintenance was a nightmare and publishing online was nearly impossible.

Now the product sheets will be saved in a database / XML so that with help of some CSS libraries/frameworks (bootstrap etc.) site nice layout can be achieved while keeping the simplicity of editing content in a database and displaying the sheets online. For better reading and design reasons the sheets will contain TWO columns on normal screen and paper and 1 column only on mobile devices. This all is doable. Somehow.

However the next requirement is to be able to generate PDFs out of the same source (database/xml) and the PDF shall, of course, keep the layout for DIN A4 paper - header, footer, two columns, which flow always on first page from left column to right column and then on next pages again from left to right column. Like when you load a text in indesign for example. So that the PDFs when printed can be red.

Unfortunately the HTML page does not respect the fixed length of a DIN A4 paper and when showing two columns, they flow till the bottom of the page "infinitely".  When I tried to play with bootstrap for example, I was able to accomplish the HTML part, but then I was unable to either print it to PDF or even while using some PDF library to generate A4 standalone pages.

I hope I am expressing …
0
I am creating a website in the Divi theme in Wordpress, the buttons on my mobile page are listed underneath each other but I would like to align them. The webpage is https://capitolreef.entrr.io/photography/landscape/ (it's about the specific landscape page) please note that I created different buttons for desktop and mobile, on desktop they are perfectly fine, but the mobile site is the problem. I've tried several CSS codes, but up until now nothing worked.
Can somebody help me out? Thanks in advance!
0
Is it possible to create a search bar like the one shown attached? I'm wanting it to look like one bar but actually have 2 input fields. If this is possible, can someone please draft out the html and css for this? I've tried every possible option to no avail.

Thanks so much for your help!
Screen-Shot-2017-06-20-at-9.34.17-AM.png
0
I widen Footer 3 Widget that has the "Visit Us" address info at bottom of site so that the city, state and zip were all on one line.  
http://681.3b0.myftpupload.com

.footer-widgets-3 {
  width:300px;
}

Open in new window


I reduced width of Footer 4
.footer-widgets-4 {
    float: left;
  width: 340px;
}

Open in new window

and that did help positions things more attractively on desktop but it laid goofy on mobile devices.  The "How Can We Help" info appears flush left.  I would like the "Call Us" and "Visit Us " to also float left.  That is how they are setup but is doesn't work.
0
I am using Centric Pro by Studio Press.  I put a Genesis Responsive Slider in Home 1 widget which is not standard for this theme.  I would like the image to extend the width of the screen or at least a bit more than it is now.  

On the slider settings page, I have it set to Max Slider Width 1270 px.

http://681.3b0.myftpupload.com/
0
Free Tool: ZipGrep
LVL 8
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

When you have a page you get the use of the whole area, when it is a post you lose about 1/3 of the screen on the right to show who posted the post and when they did so. How do I get a post to render like a page and use the full width. Is there any way to say format posts as pages?
0
My Css is not applying . Here is the codes from code behind!!!

        //Get list of all products in DB
        EventDetail eventDetail = new EventDetail();
        List<EventDetail> details = eventDetail.getAllEventDetail();

        //Make sure events exist in database
        if (details != null)
        {
            //Create a new panel with an image button and 2 labels for each event
            foreach (EventDetail detail in details)
            {
                Panel eventPanel = new Panel();
                ImageButton imageButton = new ImageButton();
                Label lblName = new Label();
                Label lblPrice = new Label();

                //set childcontrols' properties
                imageButton.ImageUrl = "~/EventImages/Events/" + detail.eventImage;
                imageButton.CssClass = "eventImage";
       
                imageButton.PostBackUrl = "Detail.aspx?id=" + detail.EventDetail_ID;

                lblName.Text = detail.eventDetailName;
                lblName.CssClass = "eventName";

                lblPrice.Text = "$ " + detail.eventPrice;
                lblPrice.CssClass = "eventPrice";
               
                //Add child controls to panel
                eventPanel.Controls.Add(imageButton);
                eventPanel.Controls.Add(new Literal { Text = "<br />" });
                eventPanel.Controls.Add(lblName);
                eventPanel.Controls.Add(new Literal { Text = "<br …
0
Am am looking for either a library or some code to use that would allow me to add code snippets to my html pages with syntax highlighting.

What options do I have that will work with or on top of Bootstrap 3?
0
WP Twenty Twelve theme
https://SROTHAN.COM

When page displays on a mobile device, a "MENU" button appears behind pages' menu items.
When page displays on larger display (>800 x 600, for insance) "MENU" button does not appear.
How can this "MENU" button be hidden on mobile device displays so only menu items appear?

Many Thanks ~ Jacob
0
I would like some help with trying to resolve why my CSS is not correctly sizing an element of my site.  

Please go to this page:
https://makingyourlifecount.org/player.php?ref=c15.20150721.2

If you shrink the screen size down to  a small size (i.e. less than 500) it puts the bottom gray box into one column which is appropriate. Then as you increase the screen size the width of the gray box sizes appropriately until you get to 1200px. At that time, the gray box jumps down to a smaller size and stays that way.

I'm sure it is a simple piece of CSS code or a <div> that needs to be added. But I'm having trouble finding it and would like some help.

The attached video shows this on my computer.

Thank you for helping me solve this.
MYLC-Screen-Width-Problem.mp4
0
I am having trouble getting my sites css to load on ios devices. I have noticed it on my iPhone 6 and another iphone and my client found it on their ipad as well on safari and chrome. The site loads perfectly on desktop and all other mobile devices that we have tested. I have loaded the iphone safari browser in the developer mode and see no errors. I have searched around and not found any solutions for it.

The site is https://www.staging.maxbotix.com
ios-screenshots.jpg
0
Hi, This has been bugging me for a long time and I can't seem to solve it.
There is a slider at the bottom of this page: http://2017.lucidityfestival.com. At different screen resolutions, I can see the hidden logos peeking up underneath the slider. I just can't figure out which div is causing the problem.
0
I want to reduce the height of input fields. So, I have created a css class

.input-field {
  height: 20px
}

Open in new window


This works fine for text fields and also reduces the height of drop downs. However, in drop down the selection text is cut. How can I ensure that the complete text inside the drop down is visible

Here is the fiddle - https://jsfiddle.net/zvn3wknj/

The selection text 'Approve' and 'Reject' is cut and not displayed correctly.
0
I have a sidebar that converts to a tab for smaller screen sizes. This is mostly done with css, using JavaScript to open and close the tab. When the tab is open, I've made it so that the user can click anywhere on the screen to close it.

My resize() function will convert the tab back to a sidebar, but, if the user clicked on the tab at the smaller size, then enlarges their browser, clicking anywhere on the screen will make the sidebar disappear.

Basically, all I need to be able to do is to remove the onclick I've set up here, something like
    if($(window).width() > 751
    {
        {remove the event set up in $(document).click(function(e)}
    }  

Open in new window


I've tried using the jQuery ".off" function; stop propagation - nothing seems to work. Even with the right syntax, I'm not sure .off will do the trick, which. I think, may turn off any event clicks which, of course, I don't want to do. Things just need to return to normal when screen size is greater than 751.

    <script type="text/javascript">
        $(document).ready(function()
        {
            $('#SideTab').click(function()
            {
                if($('#Sidebar1').css('margin-left') != '-300px')  // The Sidebar/Tab is open
                {
                    $('#Sidebar1').css('margin-left', '-300px');  // Hide the Sidebar (only Tab is exposed)
                }
                else
                {
                    $('#Sidebar1').css('margin-left', '0px');  // Open the 

Open in new window

0
Free Tool: Site Down Detector
LVL 8
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

hi experts,

I am trying to embed some html into a string like this $passErr = "<p class='error'>" . "Please enter your password" . "</p>";

I have tried this in so many different ways but it always outputs as plain text with the tags like so : <p class='error'>" . "Please enter your password" . "</p>

I really need to fix this asap if anyone can help I would highly appreciate it. Please see the details below

PHP CODE

<?php 
$usernameErr = $passErr = "";
$username = $password = "";
$hasError = false;
$username = 'Username';
$password = 'Password';

if ($_POST) {
    if (empty($_POST["username"])) {
        $usernameErr =  "Please enter your username";
        $username = $usernameErr;
        $hasError = true;
    } else {
        $username = test($_POST["username"]);
        if (!filter_var($username, FILTER_VALIDATE_EMAIL)) {
            $usernameErr = "<p class='error'>Invalid email format</p>"; 
            $hasError = true;
        }
    }
    if (empty($_POST["password"])) {
        $passErr = "<p class='error'>" . "Please enter your password" . "</p>";
        $password = $passErr;
        $hasError = true;
    } else {
        $password = (test($_POST["password"]));
    } 
 }
function test($data) {
    return $data;
}
?>

Open in new window


IMAGE OF OUTPUT
Screen-Shot-2017-06-15-at-22.54.19.png
0
I am using centric pro theme on genesis platform.  On home page, there is Home 2 widget where I can put a featured page and can show featured image.  

The size options offered are not ideal.  The one we are using now is pretty large at 960x700.  Is there a way we can modify it so there is a smaller size option?  The next size down is 400x300 which is too small.  

screenshot of widget
https://screencast.com/t/Wje1umCQSdL

Beta site
http://681.3b0.myftpupload.com
0
0
I am building a simple form using Bootstrap in which I am facing some layout issues related to spacing. This is how the form looks like
UI Issues
1. There is lots of space between the label and fields. For instance, in the above image empty space between label and name field is highlighted. I would like to increase the width of input field so that the space reduces. Further, Radio buttons in the options section are further to the left as compared to the name and other fields. I am not able to make out why that is the case

2. I would like to get rid of the vertical space between 2 fields. For instance, there is a space between author and IP fields. I would like them to be closed together. Again, not able to make out the reason.

This is the fiddle I have created to reproduce  the problem - https://jsfiddle.net/sbcobqz9/3/

Any help is much appreciated.
0
The navigation on a CELL phone is two lines full width.  This gets confusing because some buttons have drop downs.  I like it full width for other screen sizes but not the smallest size.  How do I change navigation to float left for smallest screen sizes?

beta site
http://681.3b0.myftpupload.com/

 I tried this but it didn't work.

@media only screen and (max-width: 320px) {
.genesis-nav-menu li a {
  text-align:left;
  }
}

Open in new window

0
How do I change hamburger icon color?  Right now it is set to white and disappears because header is white.
http://681.3b0.myftpupload.com/
0

CSS

40K

Solutions

53

Articles & Videos

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.