adjust width of top left vertical body background vs. text/images/element

  • Seeking guidance to prevent body background from bleeding into the text on devices w/ various screen sizes.

    I am a novice @ code. The desired white space as a buffer is ideal @ 90% using the zoom feature in any browser. The body background merges w/ the text @ 100% and looks terrible. It is my understanding that zooms are not reliable.

    I followed the instructions from a similar post two years ago but it did not resolve the matter. Curious if there is code I could implement to make it universal or whether this is a project out of my league.

    Find the CSS below:

    {
    backgroundi-mage:https://thewholisticedge.com/wpcontent
    /uploads/2012/05
    /suffusion-black.jpg;
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top left;
    }

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)

  • Someone has to be able to look at the actual site to see what is going on…so post a link to your site.

    Thread Starter The Mad Swede

    (@the-mad-swede)

    Thank you for your reply.

    Sorry about the link ~ I changed the settings to default styles.
    Please find a link below.

    https://thewholisticedge.com/about/the-wholistic-edge/

    Thank you!

    I’m not sure what the problem is, as I don’t have a small device here right now — but you do have a bunch of code errors that may be causing those kinds of problems:

    https://validator.w3.org/check?uri=http%3A%2F%2Fthewholisticedge.com%2Fabout%2Fthe-wholistic-edge%2F%23.T7j2LL-kDZs&charset=%28detect+automatically%29&doctype=Inline&group=0

    See Validating for more info.

    Also, I believe that Suffusion has its own support forums — so you might want to look there for issues involving theme functioning on small devices.

    Thread Starter The Mad Swede

    (@the-mad-swede)

    Thank you for your reply.
    Thank you for your assistance and recommendations.
    I will certainly validate the code as I am correct the errors.
    Thank you.

    I like the way the pages look when the browser is at 90%. Any higher and the black bleeds into the header image, text and the rest of it ~ and it looks like crap.

    I have no idea how to keep the 90% page look. That setting looks good on all devices I tested…but who uses that size? ??

    No solutions via the Suffusion Forum. The theme developer told me to check different screen sizes on various devices b/c using the zoom feature was not reliable. One person recommended JavaScript.

    I set as many parameters as possible via the Suffusion “Theme Skinning” options. I checked W3Schools tutorials. I am severely code-challenged. This looks like a job for the professionals.

    Thank you!

    I did offer you a suggestion on the support forum of making the background transparent. E.g. if your “#wrapper” is transparent, then the background blends fairly well with your content. The only issue you will see is when someone resizes the browser and the wrapper gets pushed to the left edge (in which case your black text overlaps a dark background, becoming unreadable). To mitigate this you can add a left and a right padding to the #wrapper element (say around 100px). You will have to add a similar padding on the #header-container element to ensure that your header stays aligned.

    Thread Starter The Mad Swede

    (@the-mad-swede)

    Sayontan~

    I adjusted the “post background” to transparent. I did not do anything
    w/ the “wrapper.” My mistake.

    I did see the W3C tutorials re: “padding” but I was unsure if it would have any impact. I will certainly implement your instructions via Suffusion Options.

    Thank you for your tireless support and your genius!!!

    ~jsk

    Thread Starter The Mad Swede

    (@the-mad-swede)

    Sayontan~

    The #wrapper is now transparent.
    Thank you.

    I respectfully request your help outlining the path in Suffusion Options to accomplish your #wrapper element and #header-container recommendations.

    Thank you.

    ~jsk

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘adjust width of top left vertical body background vs. text/images/element’ is closed to new replies.