Photoshop Question posted in
The official user guide can be found here.

Trying to understand the CSS controlling a section of a website – Photoshop

So i’ve forked a section on another website and I’ve looked through all the CSS and js and tried to recreate it on my website. I’ve been at it for an hour and i still can’t figure out what’s missing.

My question is what is the easiest way to find out what CSS is controlling a certain section?

Also what is missing from the CSS in my fiddle which is the reason my version of the html looks different to the one on the website mentioned above (you will have to scroll down on the website mentioned above to reach the section i’m trying to recreate).

Here is my fiddle of where I’m at https://jsfiddle.net/hLkyLqyd/

CSS:

.grab-section{
    background-color:#fff;
    width:100%;
    overflow:hidden;
    position:relative;
}
.grab-section .holder{
    width:1104px;
    margin:0 auto;
    overflow:hidden;
    padding:83px 0 123px;
}
.grab-section h2{
    text-align:center;
    font-size:58px;
    line-height:70px;
    margin:0 0 19px;
    color:#2b3e51;
}
.grab-section .intro{
    display:block;
    font-weight:normal;
    color:#bdc3c7;
    text-align:center;
    margin:0 0 67px;
}
.license-list{
    margin:0 0 41px;
    overflow:hidden;
    text-align:center;
    list-style: none;
}
.license-list li{
    float:left;
    width:50%;
}
.license-list span{
    display:block;
    padding:16px 10px 18px;
    background:#ecf0f1;
    border-radius:0 5px 5px 0;
    color:#9fa6ac;
    font-size:18px;
    line-height:24px;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -ms-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s;
}
.license-list span:hover{
    text-decoration:none;
    cursor:pointer;
    background:#f9f9f9;
}
.license-list li:first-child span{border-radius:5px 0 0 5px;}
.license-list strong{
    display:block;
    font-size:24px;
    line-height:28px;
    margin:0 0 4px;
    color:#2c3e50;
    font-weight:600;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -ms-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s;
}
.license-list .active span{
    box-shadow:inset 0 2px 0 0 rgba(0,0,0,0.2);
    background:#1abc9c;
    color:#dff3ed;
    cursor:default;
}
.license-list .active span strong{color:#fff;}
.grab-section .boxes{
    width:100%;
    overflow:hidden;
    text-align:center;
    color:#bdc3c7;
}

.grab-section .box{
    width:312px;
    position:relative;
    padding:26px 17px 39px 18px;
    border:3px solid #ebedee;
    border-radius:5px;
    float:left;
    margin:0 0 0 22px;
}
.grab-section .box.bndl:before{
    position:absolute;
    right:-5px;
    top:20px;
    content:'';
    background:url(../images/sprite.png) no-repeat -180px 0;
    width:65px;
    height:41px;
}
.grab-section .boxes .box:first-child{margin:0;}
.grab-section .box h3{
    font-size:22px;
    line-height:28px;
    color:#2c3e50;
    margin:0 0 8px;
    opacity:0.95;
}
.grab-section .box .title{
    display:block;
    font-weight:normal;
    font-size:18px;
    line-height:24px;
    color:#bdc3c9;
    padding:0 0 27px;
    margin:0 0 20px;
    border-bottom:2px solid #ecf0f1;
}
.grab-section .box .list{margin:0 0 29px;}
.grab-section .box .list strong{color:#7f8c8d;}
.grab-section .box .btn{
    display:inline-block;
    vertical-align:top;
    width:190px;
    color:#fff;
    font-size:17px;
    line-height:21px;
    font-weight:bold;
    background:#1abc9c;
    border-radius:3px;
    padding:11px 0 12px 0;
    font-weight:500;
    border-bottom: 2px solid #16a085;
}

.grab-section .box .btn:hover {
    text-decoration:none;
    opacity:0.8
}
.grab-section .box .btn:active {
    opacity:1;
}

.grab-section .holder {
        margin:0 2% !important;
    }

.grab-section .intro, 
    .license-list{
        padding:0 !important;
        margin:0 !important;
    }

   @media screen and (max-width: 1108px){
    .grab-section .intro, 
    .license-list{
        padding:0 !important;
        margin:0 !important;
    }

        .grab-section .holder {
        margin:0 2% !important;
    }

    .grab-section .box{
        width: 27%;
        padding: 26px 1.7% 32px;
        margin: 0 0 0 3%;
    }
    .grab-section .box .title{
        padding:0 0 10px;
        margin:0 0 10px;
        opacity:0.9;
    }

    .grab-section .box.bndl:before { background:none;} 
        .grab-section .box .list {font-size:16px;}
        .grab-section .box .list{margin:0 0 10px;}
}

@media screen and (max-width: 768px){
    .grab-section .intro, 
    .license-list
    {margin:0 0 15px;}

      .grab-section .box{
        float:none;
        display:block;
        overflow:hidden;
        width:auto;
        margin:0 0 30px !important;
    }

    .grab-section .box .title{
        font-size:14px;
        line-height:16px;
        opacity:0.9;
    }

    .grab-section .box.bndl:before{top:-8px;}
    .grab-section .box .bndl { display:none}
}

HTML:

<script type='text/javascript' src='http://designmodo.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>




<section class="grab-section" id="buy">
            <div class="holder">
                <h2>Ready to grab this Sweety?</h2>
                <strong class="intro">These are probably the best prices ever offered.</strong>
                <ul class="license-list">
                    <li class="active">
                        <span class="per-lic">
                            <strong>Personal License</strong>
                            For Personal Projects (from $39)
                        </span>
                    </li>
                    <li>
                        <span class="dev-lic">
                            <strong>Developers License</strong>
                            For Business Projects (from $149)
                        </span>
                    </li>
                </ul>
                <div class="boxes developer hidden">
                    <div class="box">
                        <h3>Flat UI PSD</h3>
                        <strong class="title">For Designers</strong>
                        <ul class="list">
                            <li><strong>Photoshop 5.5+</strong> PSD File</li>
                            <li><strong>Organized</strong> Layers and Folders</li>
                            <li><strong>Vector-Based</strong> Graphics</li>
                            <li><strong>Documentation</strong></li>
                            <li><strong>Free Fonts</strong></li>
                        </ul>
                        <a href="/flat/?add-to-cart=97326" class="btn">Buy for $149</a>
                    </div>
                    <div class="box bndl">
                        <h3>Flat UI PSD &amp; HTML</h3>
                        <strong class="title">For Professional Front-Enders</strong>
                        <ul class="list">
                            <li>Features from <strong>PSD&amp;HTML</strong></li>
                            <li><strong>Smart Way</strong> to Use Kit</li>
                            <li><strong>Low Price</strong> Deal</li>
                            <li><strong>Documentation</strong></li>
                            <li><strong>Free Fonts</strong></li>
                        </ul>
                        <a href="/flat/?add-to-cart=97328" class="btn">Buy for $249</a>
                    </div>
                    <div class="box">
                        <h3>Flat UI HTML</h3>
                        <strong class="title">For Coders</strong>
                        <ul class="list">
                            <li><strong>Bootstrap-Based</strong> Layout</li>
                            <li><strong>Retina Ready</strong> Icons &amp; Graphics</li>
                            <li><strong>Responsive</strong> Layout</li>
                            <li><strong>Documentation</strong></li>
                            <li><strong>Free Fonts</strong></li>
                        </ul>
                        <a href="/flat/?add-to-cart=97324" class="btn">Buy for $149</a>
                    </div>
                </div>

                <div class="boxes personal">
                    <div class="box">
                        <h3>Flat UI PSD</h3>
                        <strong class="title">For Designers</strong>
                        <ul class="list">
                            <li><strong>Photoshop 5.5+</strong> PSD File</li>
                            <li><strong>Organized</strong> Layers and Folders</li>
                            <li><strong>Vector Based</strong> Graphics</li>
                            <li><strong>Documentation</strong></li>
                            <li><strong>Free Fonts</strong></li>
                        </ul>
                        <a href="/flat/?add-to-cart=97327" class="btn">Buy for $39</a>
                    </div>
                    <div class="box bndl">
                        <h3>Flat UI PSD &amp; HTML</h3>
                        <strong class="title">For Professional Front-Enders</strong>
                        <ul class="list">
                            <li>Features from <strong>PSD&amp;HTML</strong></li>
                            <li><strong>Smart Way</strong> to Use Kit</li>
                            <li><strong>Low Price</strong> Deal</li>
                            <li><strong>Documentation</strong></li>
                            <li><strong>Free Fonts</strong></li>
                        </ul>
                        <a href="/flat/?add-to-cart=97329" class="btn">Buy for $69</a>
                    </div>
                    <div class="box">
                        <h3>Flat UI HTML</h3>
                        <strong class="title">For Coders</strong>
                        <ul class="list">
                            <li><strong>Bootstrap-Based</strong> Layout</li>
                            <li><strong>Retina Ready</strong> Icons &amp; Graphics</li>
                            <li><strong>Responsive</strong> Layout</li>
                            <li><strong>Documentation</strong></li>
                            <li><strong>Free Fonts</strong></li>
                        </ul>
                        <a href="/flat/?add-to-cart=97325" class="btn">Buy for $39</a>
                    </div>
                </div>
            </div>
        </section>


<script type="text/javascript">

 jQuery('.license-list li span').click(function(){
        if (jQuery(this).parent().attr('class') != 'active'){
            jQuery('.license-list li.active').removeClass('active'); 
            jQuery(this).parent().addClass('active');
            jQuery('.boxes.developer').slideToggle(300);
            jQuery('.boxes.personal').slideToggle(300);
            jQuery('.boxes.personal').before( jQuery('.boxes.developer') );
        }
    });

</script>

help will be appreciated

Thanks in advance

Tags:

2

Answers


  1. 0

    Try using the devtools of a browser such as Chrome to select the element. There should be a pane, usually on the right side, that shows you the CSS rules applied.

    Login or Signup to reply.
  2. 0

    just right-click on the element you want to know the css or js controlling it and select Inspect Element.

    FIRST EDIT

    Alternatively, saving a page locally downloads all the css and js used by the page. Then, you can just copy the css styles from the downloaded folder.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search