Controlling Image Size in Column CSS

User 3187805 Photo


Registered User
8 posts

I’m using Windows 11 and the HTML Editor.

I have downloaded the free “yoga” Template and am stuck on controlling the size of the picture of the lady in the orange jacket on the first page. Attached is the main.css and index for this Template. The image in question appears on line 448 of the main.css document. The image is “yhreduction1-4.png.”

I have modified the original main.css Template to split the first container (container.image.hero-1) on Line 421 of the main.css file into the two columns in a 60% and 30% ratio. The image of the lady appears in the right column (centered) just fine, but the image inside that right column is too large. What and where do I add the code to control the size of that image? The size and ratio of the right column (30%) is fine, it’s just the size of the image inside that column that has me flustered.

I thought I could control the size of the image simply by modifying the image itself, i.e. reduce the size/resolution of the original image. But the % control of the right column just spreads whatever image resolution I import.

My brain is cooked. It should be so simple but I just can't make it work. I am asking for some specific instructions, like "add XXXXX to line XXX and delete line xxxx...you idiot." The last time I coded was 20 years ago. Not only have HTML and CSS changed drastically (concepts and terminology), the necessity to code for both mobile phones and websites is something I’ve never faced.
Attachments:
User 2699991 Photo


Registered User
5,016 posts
Online Now

Try line 450 background position: center, center;
if that doesn't do it
line 453 background size: 100% auto;

If that doesn't do it
Not only have HTML and CSS changed drastically (concepts and terminology), the necessity to code for both mobile phones and websites is something I’ve never faced.


Consider buying CC Site Designer and build your site visually, so you can see what you do when you do something EASY PEASY :D:D:D


Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 3187805 Photo


Registered User
8 posts

I tried both, and each one seemed to work fine.
You are brilliant.
Take the rest of the day off.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.