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

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
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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
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
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
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
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
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
I am using Bootstrap 3 in my Angular 4 app to create a form. In the form, I need to render checkboxes on the basis of data returned from a web service call. So, I need to iterate over the data and render a checkbox for every value received.

The display for these checkboxes is bit messed up as in the screenshot below -
Current state
Is there a way to display these checkboxes in 3 columns. Something like this (looks much cleaner) Target state
My current code is as below


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" 

Open in new window

0
Hello,

I'm making a website on godaddy in website builder 7...i want to: when i mouse over an image, the image became bigger in that same page..

Plz help me...
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.

I know that I have posted this question before to little response. However, I am hoping for a more creative answer.
1) Take a look at our website: www.peakventures.ca

You will notice that on the third page onward (I believe) there are scrolling testimonials near the bottom. My boss would like these testimonials to scroll on the top of every page near the header. Someone previously told me to add it in the header code, or something like that. I need to know how to do this. I did not build the website and it really needs some improvement I know. However, for now this is what I am dealing with. Is there a way to have those scrolling testimonials moved to scroll at the top of each page? The theme of the website is Sydney. If you need to look into our site, I can give you access - only if you think you have a solution.

Kind Regards,
Tina
0
I am looking for some guidance/snippets/samples of html/css/etc.  that I can use to build a tile menu something like metro tiles, but not so complex.
0
I was making up a layout and got stucked while making up this image. What I have done till now is that I have inserted an image onto the background for background but confused how to get that group of profile pictures below it in same style and also show "+8" for more images. I am sure things will be done with js.This is the required layout i needed  Any help would be appreciated.
0
I have a very simple responsive popup enabled to view large image, it works perfectly fine when viewing in the portrait mode but when I view it in landscape mode only of the image is shown and I think the reason being I have css  position fixed to center the popup, If I remove position fixed and making is absolute then the popup always stays at the top

here is the link for my dev site

dev site link

if you click on any of the badges you will see popup, try viewing in landscape mode and you will see what I mean

Here is my HTML code

<a class="cd-popup-glink gallery-link" onclick="openPopup(this);"><img class="box-shadow" src="/wp-content/uploads/2017/06/star32.jpg" alt=""></a>
<div id="b125" class="cd-popup-gl popup is-visible" role="alert">
 <div class="cd-popup-container-gl">
 <div class="gallery-item-cat-full-img">
  <p class="pop-title">Product Name<br><span class="pc-sku">Model# <strong>sku</strong></span><br>To design your custom badge CALL: xxx-xxx-xxxx</a> and use the Model# as reference</p>
  <img id="zimage" class="box-shadow" src="/wp-content/uploads/2017/06/star32.jpg" alt="">
 </div>
 <a onclick="closePopup();" class="cd-popup-close-gl img-replace">close</a>
 </div> 
 </div>

Open in new window


JavaScript

<script type='text/javascript'>
function openPopup(elem) {$(elem).next().addClass('is-visible');$(elem).next().siblings(".popup").removeClass('is-visible');}
function closePopup() {$('.popup').removeClass('is-visible');}	 
</script> 

Open in new window


and CSS:


Open in new window

0
Hi,
How to adjust to list below, to have also one picture file included, that is retrieved from database?

            using (SqlConnection sqlConn = new SqlConnection(ConfigurationManager.ConnectionStrings["Mssqlconn3"].ConnectionString))
            {
                using (SqlCommand sqlCmd = new SqlCommand("SELECT house_name, address1, address2, price, price_curr FROM house_tab", sqlConn))
                {
                    sqlConn.Open();
                    sqlCmd.CommandType = CommandType.Text;
                    SqlDataAdapter sqlAd = new SqlDataAdapter(sqlCmd);
                    DataTable sqlDt = new DataTable();
                    sqlAd.Fill(sqlDt);
                    sqlConn.Close();
                    if (null != sqlDt)
                    {
                        houseList = sqlDt
                                        .AsEnumerable()
                                        .Select(dataRow => new HouseData
                                        {
                                            house_name = dataRow.Field<string>("house_name"),
                                            address1 = dataRow.Field<string>("address1"),
                                            address2 = dataRow.Field<string>("address2"),
                                            price = dataRow.Field<decimal>("price"),
                                            price_curr = dataRow.Field<string>("price_curr"),
                                        })
         

Open in new window

0
I am working up on this layout got it done till this much What I have made till now and have to reach at this placeRequired layout.

I am unable to get that profile picture in hexagonal shape. And secondly to get those tabs in the same style as the required picture. Also that navbar in somewhat different style as mine. Any help would be appreciated.

Here is my Code:
<style type="text/css">
.profile-widget {
  background: url(images/profile-widget-bg.jpg) no-repeat 0 0;
  background: position: cover;
  width: 250px;
  border-radius: 3px;
  padding: 15px;
}
.profile-widget img {
  border: 8px solid white;
  border-radius: 70px;
  float: left;
  width: 150px;
  margin-top: -170px;
}
.profile-widget {
  font-size: 11px;
  font-family: Verdana, Geneva, sans-serif;
  display: inline-block;
  color: #fff;
  margin-left: 350px;
}
.profile-widget:after {
  content: " ";
  display: table;
  clear: both;
}
.tabs{
    margin-left: 20px;
    margin-top: 20px;
}
</style>

<div class="container">
    <div class="row">
        <div class="col-sm-12" style=" margin-left: 100px; margin-top:-20px;">
            <img src="/cabme/2/1.jpg" width="904" height="336" />
                    <nav class="navbar navbar-default" style=" margin-right: 235px">
<div class="tabs">
<a href="">Sarah Cruiz</a>&emsp;&emsp;&emsp;&emsp;
<a href="c">Timeline</a>&emsp;&emsp;&emsp;&emsp;
<a 

Open in new window

0
I was making up a layout and got stucked while making up this image. I am confused how to get that profile picture and user name and other text along with that cover pic onto that rectangle. Any help would be appreciated.wqwqwq.png
0
Hi,  I have used a web template which is great.

The only thing is, I cannot see where to adjust the size of the header (see image).

page
HTML..

<!DOCTYPE HTML>
<html>

<head>
  <title>Staff Sale</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

     <link href="css/font-awesome.css" rel="stylesheet" />
     <link href="css/ValidationStyleSheet.css" rel="stylesheet" />

     <link rel="stylesheet" type="text/css" href="css/style.css" />
  
  <!-- modernizr enables HTML5 elements and feature detects -->
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>

<body>
  <div id="main">
    <header>
	

      <div id="logo">
       
      </div>

      <nav>
        <div id="menu_container">
          <ul class="sf-menu" id="nav">
            <li> <a href ="index.asp">Home</a></li>
            <li><a href="examples.asp">Examples</a></li>
           
			
			<li><a href="#">Place New Advert</a>
              <ul>
                <li><a href="index.asp?query=NewAd&subquery=ForSale">For Sale</a></li>
                <li><a href="index.asp?query=NewAd&subquery=Wanted">Wanted</a></li>
                
              </ul>
            </li>
			 <li><a href="#">View Adverts</a>
              <ul>
                <li><a href="index.asp?query=ViewAd&subquery=ForSale">For 

Open in new window

0
Hi,
I am using Jquery datatables. In that when data is not there then select all check box is properly aligned,When i have supplied the data to data table then it is misplaced. It is aligned in down but the clicking property is in correct place,Only check box is not in correct place.
I don't know how to solve,Please help me.
0
Technology Partners: We Want Your Opinion!
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

To be clear, I've got this working when is just an ul list and quasi-working on ol. But, when the lists are nested and a mixture of ul and ol, it's a hot mess!

So, here's a page full of lists:

http://sandbox.intrepidrealist.com/inquisitive-canine/2017/06/02/test-post/

The ul list are working wonderfully.
The ol list doesn't reset the step counter when there is a sublist
The mixed ul/ol lists are just bungled.

Not sure how to approach this!

Here's my list code:
ul,
ol {
	margin: 0 0 1.5em 0;
}

ul {
	list-style: none;
}
#primary .hentry ul li:before {
  content: '\f1b0';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.3em;
  margin-top: 0px;
  color: #585858;
}
#primary .hentry ul ul li:before {
  content: '\f192';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.3em;
  color: #585858;
}
#primary .hentry ul ul ul li:before {
  content: '\f10c';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.3em;
  color: #585858;
}

ol {
	list-style: decimal;
}

#primary .hentry ol,
#comments ol {
	position: relative;
	margin-left: .5em;
	padding-left: 28px;
	list-style-type: none;
}
#comments ol.comment-list {
	margin-left: 0;
	padding-left: 0;
}
#primary .hentry ol li,
#comments ol li.comment ol li {
	counter-increment: step-counter;
	margin-bottom: 8px;
}

#primary .hentry ol li:last-child,
#comments ol li.comment ol li:last-child {
	margin-bottom: 0;
}
#primary .hentry ol li::before,
#comments ol li.comment ol li:before {

Open in new window

0
I have a site and their blog page has gone askew.
Can anyone help with the code to get these back into a 3 col. layout.
Its obvious that it would be a setting in the theme to get it to be 3 columns, but that setting is set, so where, and how can I override this with css please to get it back into three columns...
I hope someone can help?
0
iOS (iPhone 6s) has a default feature where a finger flick will try to scroll horizontally (or vertically). The horizontal scroll is annoying and I would like to disable it. This must be a common problem and I'm wondering how websites typically handle it.  I have limited all content to 375px using css width & max-width on body and page-wrapper div.  I've tried some of the proposed solutions - from complicated to simple - with limited success.  What I'm using right now is:

body {
          height:100%;
          position:fixed;
          overflow:hidden;
      }

This does disable the horizontal touch-scroll, but also disables vertical scrolling.  How can I re-enable y-direction touch scrolling?
0
I am displaying 50 images using archive.php in wordpress. But while loading, it is getting mixed up with each other. After loading fully, it is coming in a perfect way. I tried applying lazy load in that page. But it is not working. Is there any other way to do this?
1
Hello. Do anyone know how to solve when I use Gii generator by Yii and want to create such as such as form generator, it always fail and state that the model class may not exist or have syntax error. After generate the model class, I did not change anything. everything was just okay before this. it happen around this few days.  may experts can help. I really need to solve this problem as I need to use it. I am now in an internship so I want to do my best here for me to complete my study.
0
Hello experts. Is there any way for me to make a floating button using yii2 or how to make the nav bar static and fixed when scrolling the page? here is my code

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use yii\helpers\HtmlPurifier;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;
use common\widgets\Alert;
use frontend\themes\kongoon\KongoonAsset;

KongoonAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>


<div class="wrap">
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
   
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      
<?php

 
    $menuItems = [
	
        ['label' => 'Home', 

Open in new window

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.