Member Avatar for James_43

Hi there,

I have the following code to define the first article on the website I'm developing Strong-Links.org

                            <article id="me" class="panel">
                                <img src="/images/Strong-Links.png">
                                <a href="#work" class="jumplink pic">
                                    <span class="arrow icon fa-chevron-right"><span>See my work</span></span>
                                    <img src="images/me.jpg" alt="" />
                                </a>
                            </article>

This basically just places two images on the page, with me.jpg aligned to the left, and an arrow icon overlaying it.

However, when I view this page from the mobile, Strong-Links.png spans over the screen. I need to make it width=100%.

In the CSS mobile styles, I have defined the below:

.picture-center
    {
    width=100%;
    height=100%;
    }

The same, but blank, is in the desktop CSS styles.

Under the HTML file, I now have the following:

                        <article id="me" class="panel">
                                <div id="center-picture">
                                <img src="/images/Strong-Links.png">
                                </div>
                                <a href="#work" class="jumplink pic">
                                    <span class="arrow icon fa-chevron-right"><span>See my work</span></span>
                                    <img src="images/me.jpg" alt="" />
                                </a>
                            </article>

However, this does not solve the problem. The image still overlaps the edges on a mobile device. Some please tell me what I am doing wrong!

  • 2 Contributors
  • 5 Replies
  • 260 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by James_43

Dani AI

Generated

Brief summary: correctly diagnosed the root cause in this thread — the visible problem comes from the image itself not being constrained, so the browser lets its intrinsic (large) width overflow small viewports. Building on that fix, here are a few durable, practical ways to make the layout robust on phones and tablets while keeping the overlayed icon intact.

Add a viewport rule so mobile browsers scale the layout predictably:

<!-- put in the page <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1">

If the project uses Bootstrap, prefer the framework’s responsive image utility (Bootstrap 3 vs 4/5 differ in name) instead of hand-rolling rules. For decorative hero images that should not be part of the document flow, use a CSS background on a wrapper — it gives better control over sizing and cropping:

.hero {
  background-image: url("/images/Strong-Links.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* or 'cover' for full-bleed */
  width: 100%;
  min-height: 180px; /* choose based on design */
  position: relative; /* keeps overlays positioned correctly */
}

For the overlayed link/icon, keep the overlay absolutely positioned inside a relatively positioned parent so it stays on top and does not cause layout overflow:

.panel { position: relative; overflow: hidden; box-sizing: border-box; }
.jumplink { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Performance and accessibility notes not yet mentioned in the thread: give meaningful alt text for non-decorative images, and serve size-appropriate files with srcset/sizes or a <picture> element to avoid sending huge images to mobile:

<img src="/images/me-800.jpg"
     srcset="/images/me-400.jpg 400w, /images/me-800.jpg 800w, /images/me-1200.jpg 1200w"
     sizes="(max-width:600px) 100vw, 600px"
     alt="Brief description">

Debug checklist if overflow persists: inspect the computed width in DevTools, check ancestor elements for fixed/min-width or negative margins, confirm no transforms/scales are enlarging the container, and use overflow:hidden on the parent when appropriate. Overall, ’s markup (an article with a hero + an overlaid portrait) works well — combining a constrained image strategy, the viewport meta, or a background-image approach will make the section behave reliably on mobile.

Recommended Answers

All 5 Replies

Member Avatar for James_43

Ah - sorry, ignore the picture-center / center-picture confusion. That was just a typo, all are the same in the real code.

Member Avatar for gentlemedia

You should have not a = but a : in your .picture-center CSS block and the height should be auto. Perhaps width should be max-width as well, but I don't know your situation.

.picture-center
    {
    width:100%;
    height:auto;
    }
Edited by gentlemedia
Member Avatar for James_43

My bad - another typo. The CSS is:

.picture-center
    {
        width: 100%;
        height: auto;
    }

So, the = bits were a mistake. And still no success. Does it matter that the article is already within a DIV frame?

Member Avatar for gentlemedia

I was also not paying attention. It's the img that you have to select, so like this:

.picture-center img {
    max-width: 100%;
    height: auto;
}

If the div .picture-center is redundant, then leave it out and use article .panel as selector maybe.

Edited by gentlemedia
Member Avatar for James_43

Awesome - thanks, that worked great! :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.