Mobile Image Issues

  • Resolved blu3t0rtuga

    (@blu3t0rtuga)


    10 years, 9 months ago

    Hello. I am using a Twenty Twelve Child Theme on my website Blue Tortuga Design and I did not like how it was displaying on mobile devices as responsive, so I made it unresponsive. It displays much better EXCEPT that I am having issues with how the images display.

    Problem 1: On the home page, I am using the Advanced WP Columns Widget to display text left images right. In mobile view, it displays text align center with images underneath. The images overlap slightly. I can handle text top/ images bottom in mobile but not the overlap or the centered text.

    Problem 2: The 2 logos at the bottom of the screen are un-aligned in mobile view.

    I think the problem is that my magin+ padding+ image-width > 100% but I can’t figure out how to solve it. I have tried making width and height: auto and max-width and max-height 100% but to no avail.

    Any insight would be greatly appreciated:)

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter blu3t0rtuga

    (@blu3t0rtuga)

    Solved the issue of the text alignment by inserting <p style=”text-align:left;”> at the beginning of each paragraph in WP Advanced Columns. Still working on image alignment.

    Thread Starter blu3t0rtuga

    (@blu3t0rtuga)

    Solved the issue of the images not aligning by changing the body .site padding from 40px 2.85714286rem to 20px 1.42857143rem as follows:

    /* Minimum width of 960 pixels. */
    @media screen and (min-width: 960px) {
    body {
    background-color: #e6e6e6;
    }
    body .site {
    padding: 0 20px;
    padding: 0 1.42857143rem;
    }
    Still working on front page columns.

    Thread Starter blu3t0rtuga

    (@blu3t0rtuga)

    Got tired of messing around, deactivated WP Advanced Columns and built my own… vuala, problem solved.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile Image Issues’ is closed to new replies.