• Closed
  • Sharon Jameson
    Spectator
    11.12.2015 at 23:21 #22997

    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;
    }

    Denzel Chia
    Moderator
    Posts: 2656
    12.12.2015 at 07:50 #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
    Posts: 8
    12.12.2015 at 22:28 #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
    Posts: 2656
    13.12.2015 at 08:12 #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
    Posts: 8
    13.12.2015 at 17:17 #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.