CSS Desktop/Mobile

[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!

[James_43]

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

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

[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?

[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.

[James_43]

Awesome - thanks, that worked great! :)