Avatar of David Schure
David Schure asked on

Right side image not resizing...

Problem with the image on the right covering the image on the left as the window resizes.

https://arise.plus

I'm doing this to resize the left image...

#one {
     background-image: url("resources/images/HomeImage.png");
     background-position: center center;    background-repeat: no-repeat;    background-color:#ffffff;   float:left;    width:50%; } #two {    background-image: url("resources/images/HomeImageRight.png");   background-color:#ffffff; }

Open in new window

CSSHTML

Avatar of undefined
Last Comment
David Schure

8/22/2022 - Mon
ASKER
David Schure

It’s also not looking correct on mobile device. Left image is being cut off in portrait and landscape views.
David Favor

State exactly what you expect to be happening.

Also, while debugging, use a contrasting color... as trying to visually see what's occurring is difficult with same color...

For example, during debugging, make HomeImageRight.png a solid red color or something different than left image background.

Best to make a short video, with audio annotating what you're doing + what you're expecting + what you see different.

All this likely seems clear to you, because you know your target outcome.

For others, difficult to translate/understand your thinking.
ASKER
David Schure

Hi, I almost have it working.  Problem is I have a small space on the right.
You can see it's creating an Horizontal scroll bar at the bottom.
https://arise.plus
<style>
* {
  box-sizing: border-box;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
</style>

Open in new window

<div class="row"> 
  <div class="column">
    <img src="resources/images/HomeImage.png" width="100%">
  </div>
  <div class="column">
    <img src="resources/images/HomeImageRight.png" width="100%">
 </div>
</div>

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER CERTIFIED SOLUTION
David Schure

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question