7 replies [Last post]
deuce25
deuce25's picture
Offline
newbie
Last seen: 24 weeks 2 days ago
Timezone: GMT-4
Joined: 2018-06-19
Posts: 4
Points: 5

Hi. I’m far from well-versed in CSS but have tried everything I can to resize the image below.

This is the code for the section:

<div class="column mcb-column one column_our_team "><div class="team team_circle"><h4 class="title">Tristan </h4><div class="image_frame no_link scale-with-grid"><div class="image_wrapper"><a href="" target="_blank"><img class="scale-with-grid" src="http://website.ca/wp-content/uploads/2018/06/tristan.png" alt="" width="242" height="355"/></a></div></div>

Can someone help with this? I just want to make the circle image bigger using some custom css.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9715
Points: 3791

Guessing at what you want

Here's one way to do it:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">
    <title>
      Test document
    </title>
    <style media="screen">
    /*<![CDATA[*/
 
    body, html {
	font: 100%/1.5 sans-serif;
	margin:0;
	padding: 0;
    }
 
    p {
	font-size: 1em;
    }
 
    h1, h2, h3 {
	font-family: serif;
    }
 
    h1 {
	text-align: center;
    }
 
    h1 a {
	color: black;
    }
 
    h1 img {
	width: 100%;
    }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="banner">
      <h1><a href="#">
	<img src="tristan.jpg" 
		alt="Tristan"></a>
      </h1>
    </div>    
  </body>
</html>

Some notes:
It's obvious from the code snippet you gave us you're using some sort of platform like Bootstrap. Putting classes on everything is a sure sign your site will be expensive to maintain and debug. Bootstrap and others of that ilk are bad about destroying the structural and semantic nature of html.

Your first heading element is an H4. Now, you may have that H4 properly ordered following H1–H3, but I doubt it. Assistive technologies depend on headings to provide structural guidance.

The DIV element is totally non-semantic. It is not there to hold content directly. It is an aggregating element; it holds other semantic containers with their content. Think of it as a drawer in a chest. It holds, say, socks and underwear. This allows you to give the drawer rules as a unit within the chest without disturbing other drawers. Likewise other drawers can have their own rules without affecting the sock drawer.

The SPAN element, which didn't appear here, is a non-semantic segregating element. It allows you to pick out certain content and give it different rules. Here's a common example.

<p>
There are certain <span lang="fr">soi-disant</span> web developers who fail to understand how to properly use HTML and CSS.
</p>

span[lang] {
    font-style: italic;
    }

Your pic isn't really suitable for enlargement. Have one with better quality? Preferably it should have a native size equal to its container size so you only need to reduce for smaller viewports and do not need to enlarge.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

deuce25
deuce25's picture
Offline
newbie
Last seen: 24 weeks 2 days ago
Timezone: GMT-4
Joined: 2018-06-19
Posts: 4
Points: 5

I'm just using a Wordpress

I'm just using a Wordpress theme that has a section for custom CSS. I was just trying to use a little snippet like this but I can't figure out the proper CSS.

.team_circle { height: 300px; width: 300px; }

or

.list_item .team_circle { height: 300px; width: 300px; }

Keep in mind I am FAR from well versed in CSS. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9715
Points: 3791

Have you tried either one?

Oh, and only define either width or height. Your image is not square. You risk distorting the aspect ratio if you define both.

Please read and study my earlier post. Try the code I gave you. Get a better image.

g

Addendum: If this site is important to you, you should hire a competent coder or spend some time learning html and css yourself. ~g

Addendum2: See HTMLDog.com for excellent tutorials. ~g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

deuce25
deuce25's picture
Offline
newbie
Last seen: 24 weeks 2 days ago
Timezone: GMT-4
Joined: 2018-06-19
Posts: 4
Points: 5

Hi Gary, I guess I'm a little

Hi Gary,

I guess I'm a little brain-dead as I don't know how to utilize the code you gave me or how it could affect/modify the "team-circle" as I see no reference to team or team-circle.

I can't modify the actual html/php of the page. I just want to add a snippet of css code into the "custom CSS" section of my theme settings. I've managed to do this sort of thing with other sites for other css elements (like #Action_bar {background-color: #baa187 !important;}) but I just can't figure out the right snippet of css to size the circle image.

BTW, the original image I uploaded for the circle pic is very high res.

My apologies for being such a noob. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9715
Points: 3791

My bad

What I gave you is basically a generic, baseline version of your code snippet. I couldn't open your image as written in your op, so I used the image you loaded to CSSCreator.

Again, did you try either of the potential fixes you posted here? How did it fail, if it did?

Please give us the actual page url so we can dig into debugging and testing.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

deuce25
deuce25's picture
Offline
newbie
Last seen: 24 weeks 2 days ago
Timezone: GMT-4
Joined: 2018-06-19
Posts: 4
Points: 5

The site is in dev mode so

The site is in dev mode so the page url not accessible by anyone other than admin.

The snippets I tried didn't do anything at all.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9715
Points: 3791

Another version

    div.column_our_team img.scale-with-grid {
	border: 1px solid red;
	width: 484px;
	height: 710px;
    }

If you do not remove the width and height attributes from the html image, you will have problems with getting the aspect ratio correct. The rendering will be fragile; easily broken.

You say you cannot change the html. You should be able to. Open the template for that page, find the image element and delete the size attributes. If in fact you can't, you should trashcan the theme as not being fit for purpose.

I would not allow that code you posted in any page I ever wrote.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.