Chrome and Safari are shrinking images

Home Forums WordPress Themes – Premium Encounters Chrome and Safari are shrinking images

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #15172
    Bob Deaver
    Participant

    All works fine in Firefox, but Chrome and Safari are shrinking images in my tables. Some images are the correct size while others are too small. This page is an example..

    http://gardenandsoul.com/sketchy/

    I believe I need to adjust the style.css file to make an img setting “none” instead of “100%”, but haven’t found the right setting yet.

    Any help is appreciated.

    #19948
    Sushil Adhikari
    Moderator

    Before I give you a much easier and better solution…did you create this table layout or did a plugin do it for you?

    #19949
    Bob Deaver
    Participant

    This was created in Dreamweaver, so not a plugin.

    #19950
    Sushil Adhikari
    Moderator

    Basically, the issue is with your table structure (somewhere). Technically you should not be using tables for this, so I was about to give you a solution that uses inline columns (which this theme has styling for) because you get to have a consistent structure, but also you can maintain a responsive layout. However, I’m thinking you are not too comfortable working in the “text” view of your editor…especially when you will probably be doing a lot of these shopping layout pages that you have, so here is a sample table to use as a guideline where I create one row of your shopping layout for Dog 1, 2, 3, and 4 notecards:

    deaver-dog1-250

    Dog 1 Notecard

    Cream Colored Paper, Blank Inside. A2 size, 4.25" x 5.5", $3.00

    Box of 6, A2 size, 4.25" x 5.5", $11.95

    sitting corgi dog cards

    Dog 2 Notecard

    Cream Colored Paper, Blank Inside. A2 size, 4.25" x 5.5", $3.00

    Box of 6, A2 size, 4.25" x 5.5", $11.95

    sitting corgi dog cards

    Dog 3 Notecard

    Cream Colored Paper, Blank Inside. A2 size, 4.25" x 5.5", $3.00

    Box of 6, A2 size, 4.25" x 5.5", $11.95

    sitting corgi dog cards

    Dog 4 Notecard

    Cream Colored Paper, Blank Inside. A2 size, 4.25" x 5.5", $3.00

    Box of 6, A2 size, 4.25" x 5.5", $11.95

    This will allow you to still use tables still if you are more comfortable with that. Add a class to the table like I did “shoppingtable” and then in your stylesheet (your child theme which I see you are using), add this:

    .shoppingtable td {
    text-align: center;
    }
    .shoppingtable input {
    background: none;
    border: none;
    }

    The above will to a global centering of all your table td cells, plus your input buttons will have that grey background and bordering removed. This means you won’t have to do this to every single table cell because it’s all done from the one css for the complete table and any table that uses the class “shoppingtable”.

    If you want a table structure to use, then just add more rows as needed, then use this:

    content content content content

    Make sure there is nothing else added such as cell-padding, cell-spacing, etc, because this is obsolete now as everything is handled from CSS.

    #19951
    Bob Deaver
    Participant

    Thanks. I’ll give that a try later.

    #19958
    Bob Deaver
    Participant

    When I get around to really cleaning up my code, I’ll do your suggested method. For a quick fix, I just added this to my table tag…

    style=”table-layout: fixed; width: 100%;”

    Rather than shrinking my images, it was just making some of my table columns too narrow.

    Thanks for your help.

    #19959
    Sushil Adhikari
    Moderator

    So it is working (or somewhat working) for you now?

    #15173
    Bob Deaver
    Participant

    Yes, I’m all set.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.