• Creator
    Topic
  • #22997

    Sharon Jameson
    Spectator
    Been thanked: 0 times

    I can’t figure out the best configuration for my images to look good (not fuzzy), fit within the parameters that I want and look good on smaller screens (get smaller, but not too small).

    Any ideas?

    Here is what I have tried on http://www.cmindependent.com:

    1. On the home page I use a background image inside a content box. It looks great on larger screens but does not reduce on smaller screens, such as mobile devices.
    (See box with “CRAFTMASTER PRODUCTIONS We make you look good everywhere!”)

    Here is the CSS for that:
    .home-content-boxes
    {
    width: 50% !important;
    height: 50% !important;
    border: 1px solid #9a9a9a; !important;
    background:#fbf9e4 !important; background-image: url(“http://cmindependent.com/wp-content/uploads/2015/12/home_content_box_BG2.jpg”) !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    padding-top: 80px !important;
    padding-bottom: 0px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 290px !important;
    margin-right: 83px !important;
    margin-top: 10px !important;
    margin-bottom: 45px !important;
    }

    2. On the design page I inserted the images directly into the content boxes along with some text. Sometimes these images look a little fuzzy, but I was able to compensate some of that by saving them as pngs instead of jpgs. But, my biggest issue with them is that they shrink too much on mobile devices.
    (See all images used above the “Websites” section divider)

    Here is the CSS for that:
    .design-contentbox1
    {
    border: 0px solid #9a9a9a; !important;
    width: 100% !important;
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 3px !important;
    margin-right: 0x !important;
    margin-top: 0px !important;
    background:#ffffff !important;
    }

    .design-contentbox2
    {
    float: left !important;
    width: 47% !important;
    background:#f9f8ec !important;
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px; !important;
    margin-left: auto !important;
    margin-right: 18px !important;
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    vertical-align: top; !important;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
Replies
  • Denzel Chia
    Moderator
    Post count: 2878
    Been thanked: 94 times
    #23021 |

    Hi,

    Please hire a developer to assist in your customization.
    Sorry we do not provide code review support.

    You should use the content boxes shortcode.

    Thanks!

    Sharon Jameson
    Spectator
    Post count: 8
    Been thanked: 0 times
    #23031 |

    Hmm…tell me again why I upgraded to premium?

    Maybe you could try to interpret my question in a way that you could help with the general topic without actually providing “code support”?

    Denzel Chia
    Moderator
    Post count: 2878
    Been thanked: 94 times
    #23033 |

    Hi,

    You upgrade to premium to have premium features.
    Content boxes shortcode is a premium feature.
    Please use the content boxes shortcode.
    It’s found in the WordPress content editor, click on the button with a number 4 icon.

    Thanks!

    Sharon Jameson
    Spectator
    Post count: 8
    Been thanked: 0 times
    #23037 |

    I am already using the content box shortcode. So, I don’t see how this addresses the main issue in my question and that is how to get the ideal responsiveness with image size.

Viewing 4 replies - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.