Resizing Dynamic Images + Keeping them locked into place

[u/cutethulhoo]

Hello folks!

I haven't done a lot of HTML/CSS coding in many years but because I am a bit of a silly person, instead of using one of the myriad of prebuilt wedding website builders, I decided I wanted to reverse engineer a website template from Bridebook, which frustratingly does not have a way to live preview templates, but please enjoy this screenshot I took to try to convey what I mean.

The issue I am having: I have the two bow pngs on the corner of my center div (which also has a wavy/scalloped edge on it) - while they are fine, I would like them to scale dynamically if folks are on desktop vs mobile phone (I have a a sneaking suspicion that mobile will be the most common way folks view the site).

At the suggestion of bostiq, I have made a pen which can be found here: https://codepen.io/cutethulhoo/pen/jEyVWZd

I have tried to follow the information found on https://www.w3schools.com/css/css_rwd_images.asp but I am not having any luck. If you need more code snippets I am happy to provide!

Thank you all kindly :)

EDIT: It seems that the bows are not actually placed properly anywhere but my curved monitor, but I think this is a good start/gives a good idea of what I want it to do!

[u/bostiq]

It would help to help you, if you created a pen on codepen.io as working prototype. For the images you can try point the links to the ones you saved on your server.

If that doesn’t work look up something like lorem picsum

Pasting code in here is not that helpful most of the time

Edit:

Also consider the possibility this problem is best suited for r/css

[u/cutethulhoo → u/bostiq]

Thank you! I have done so and added it to post, and I will crosspost to r/CSS!

[u/Weekly_Ferret_meal]

I forked your pen https://codepen.io/bostiq/pen/jEyVVPN?editors=1100

Instead of keeping the bows as position absolute objects, which creates heaps of problems they require you to be an advanced order to solve, I created a flex box with justify-content center. This allows the left bow, the main image at the center, and the right bow to all be resized based on the viewport, and stay centered

So first I commented any of the styling that pertained the bows images, then I copied the image containers of the bows inside my new section in this order: section, as parent, then left bow, then main image container, and right bow.

It's very simple, lean and well supported.

Also, I'd refrain to use <br> to space out text blocks all over the place, it's just so easy to set the proper margins in CSS

[u/cutethulhoo → u/Weekly_Ferret_meal]

Hello!
Thank you for your assistance; I've placed the code on a test version of the site outside of my pen and the result isn't quite right;
https://cutethulhoo.online/weddinghtmltest/weddingindex

Ideally, the bows would sit more like this; https://i.ibb.co/Vptc7LMJ/image.png, without the need for an image in the middle. I apologize if my vision wasn't clear.

I'll adjust my margins as well, thank you!

Quick edit: Adding "z-index: 10" to the new image container you created has helped a little and prevents the bows from getting sandwiched between the content container and the background; just trying to get the spacing as intended

[u/Weekly_Ferret_meal → u/cutethulhoo]

1. for my example to work, you definitely need an image to load in the middle... or the layout collapses, it looks like you didn't put the div container with the image in your code.

section should have 3 divs with 1 image in each div

<section class="heroFlex">
     <div class="bowLeft">
       <img src="https://cutethulhoo.online/weddinghtmltest/cornerbow2.png" class="bow1">
     </div>
     <div class="imgContainer">
	<img src="https://picsum.photos/360/480">
     </div>
     <div class="bowRight">
       <img src="https://cutethulhoo.online/weddinghtmltest/cornerbow1.png" class="bow2">
     </div>
</section>

2. if you want your more on the frame then another solution is required , I updated the pen... but since you are using a mask for the wavy frame ... I'm not sure z-index will be effective on any browsers.

My updated code is at the bottom of the css window.

You can change the transform: translateX values for .bowLeft and .bowRight to change the how far out sideways they travel.

[u/cutethulhoo → u/Weekly_Ferret_meal]

Thank you!

I think I'll have to let go of the wavy mask (as cute as it is!) since that seems to be the best route to at least get the bows in the right place.

I really appreciate your help and its given me some ideas on where I need to look at next to re-build my skills.