How to fix a non-responsive image in a page

  • Resolved diver8642

    (@diver8642)


    8 years, 8 months ago

    Hi, I am trying to create a mini website on pages in my WordPress site. That is, three related pages that have an extra, html-based menu between them for navigation. Everything works fine when viewed through desktop browser. But when viewed through a mobile browser (e.g. phone) the page content isn’t responsive. Thus the viewer sees the main WP site shrunk to about 1/3 of the browser width, and the page content in 100% of the width.

    This is hard to describe, so please have a look at:
    https://santa-elena.org/reelect-pedro-menendez (which is ‘home’ in the yellow site-within-a-site menu) and the two other pages, ‘bio’ and ‘platform’.

    I believe this issue is related to some CSS I’ve used on just these three pages, not the theme (which was adapted from twenty-twelve.) Normally the site scales just fine. However I cannot figure out how to get these particular pages to look like they do full-sized and also be responsive. I have tried sizing the background img using max-width instead of width, however the result is a cropped image, not the complete image scaled to the viewport.

    Thanks for any ideas and help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Try changing #pedro_nav so it’s not using a background image. Put an image directly into that div. Set the width of the div to 100% and the height to “auto” and it should work out that the image becomes responsive.

    Thread Starter diver8642

    (@diver8642)

    Thanks, that solved the issue with the image. Now I realize I have a separate issue with the call-to-action button, which is broken into 3 pieces on mobile screen. I want it to scale to be proportionately similar to the image.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    try putting the borders on the div around the CTA instead of on the “a” element inside it.

    Thread Starter diver8642

    (@diver8642)

    tried that, but that made the call to action width 100% of the page, rather than the width of the text. Is there some way to fix that?

    Thread Starter diver8642

    (@diver8642)

    it’s past midnight, my time. Going to get some rest and will attack it again tomorrow morning. Thanks for your help so far.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    set a max width on that div.

    Thread Starter diver8642

    (@diver8642)

    Thanks again for your help, sterndata. I had to tear most of it down and re-do it this morning, but now have it set up using media queries so it works.

    Interesting article you posted, too.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    oops… my bad. I’ve deleted that entry. Very sloppy of me.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to fix a non-responsive image in a page’ is closed to new replies.

Tags