Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22212

    Thanks for the great template (“Replete”) and support — the forums have answered nearly all my questions so far.

    I’ve hit a snag on two small items on the product page I’m setting up here: http://www.dazzlezazz.com/wp/product/a-pillow-of-winds-test/

    1) When I reduce the screen size to check for mobile screen compatibility, the two columns in Product Description are cutting off the text on the right-hand side. (I increased the body font-size to 14px — but that does’t seem like it should make the text get clipped.)

    2) I’d like to reduce the font size of the “Product Description” heading, but I haven’t been able to find the right place to do so.

    Thanks for any help you can provide.

    #114892

    Hi,

    Yeh it’s a bit difficult to hit the description since nothing around it has a class or an id. The CSS below will hit it though but it will also hit on all product pages the other two blocks of text on the page.. one starting with ‘Stretched Canvas’ and another starting with ‘Archival Matte Paper’. If that is acceptable, take a look and add this code to /css/custom.css or Quick CSS located in Replete > Theme Options > Styling … text area on the bottom of the page

    #top.single-product div p {
    font-size: .9em !important;
    }

    ==================

    For the resizing, please add this css

    @media only screen and (max-width: 767px) and (min-width: 480px){
    #top.single-product .one_half {
    width: 386px !important; /*was 418px;*/
    }}

    @media only screen and (max-width: 479px){
    #top.single-product div.product {
    width: 356px !important;
    }
    #top.single-product .container {
    width: 358px !important;
    }
    #top.single-product .one_half {
    width: 328px !important;
    }}

    Thanks,

    Nick

    #114893

    Hi–

    Thanks for your help. The CSS for resizing the column on mobile was just what I needed and worked great.

    On the other issue, I wanted to resize the heading, the words “Product Description”, and not the <p> text below it. If you can tell me what to modify I’d appreciate it–

    Thanks–

    #114894

    Hi,

    Please add

    /*code below for main product title above the price*/

    #top.single-product .product_title.entry-title {
    font-size: 1.7em;
    }

    /*code below is for Product Description*/

    #top.single-product h2 {
    font-size: 1.8em;
    }

    Thanks,

    Nick

    #114895

    Nick — thanks very much. That was just what I needed. Cheers–

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Two Formatting Issues on Product Page’ is closed to new replies.