Image on page too too large

The theme is doing that itself, it will scale the image you use to fit the banner (slider in header).

To change the height, which it seems that is what you are doing, then in the Custom CSS you enter the following code.

.static-banner{
max-height: 250px !important; 
}

Change the max height pixel value to what you want. You can add a width to it, to block it and change it from a full screen width. If you do this and want it responsive, use

width: (percent value);

Test the values to get what you want.

Be aware, the wide image will not automatically scale to fit a smaller height area, it will cut off some of the height of the image and show whatever portion is visible. So if you want your own image there, edit the image as you want to fit and show in the smaller height area.

Here are more adjustments,

To make width of the banner image less, like 950px instead of full screen width, you will also need to make other adjustments to make it look decent. See what I show next,

.static-banner {
width: 80% !important;
margin: 0 auto;
max-height: 450px !important;
}
.homepage_mycarousel {
background-color: transparent;
box-shadow: none !important;
}

This lessens the width using percentage, allowing it to be responsive, and centers the banner image on the page. The “homepage_mycarousel” is the CSS selector to address background color issues as the grey background will show when the banner is made more narrow. That removes the grey background and also the box-shadow property, which causes the container of the banner to have a shadow under it, creating a subtle boundary line to appear at full width of the page once the banner is made narrow. Removing the box-shadow fixed that issue, making it smooth.

If you wanted 50 px height, that is way too small to even bother, just remove the header slider completely by doing this in the Custom CSS:

.static-banner{
display: none;
}

That will remove the wide slider image completely from the public view. If you choose to remove the display of the slider completely, you would likely have to move some elements down. Use right click “inspect element” to find the CSS selector name and then enter the selector name with the required properties and values in the Custom CSS.

If you do want to use an image in the header area (Banner), then choose one of the methods I mentioned above and use an image you edited on your desktop to fit that size you want. So if you want an image the height of 450px, create or adjust the image accordingly in your image editor, along with any width. Do this before you upload to WordPress.

Remember this about image editing. An image will “enlarge” so far before it pixelates like you already see. So taking a small image to blow it up will not work. You need to take a large image and resize to smaller, in this case to the size (width / height) you want for your banner size. So taking an image that is large, crop it, resize it, etc in a decent image editor (don’t use Windows MsPaint) and save it as medium-low quality, assuming it was originally 100% quality (sharp, clear with no blur or pixelation).

Hope that helps.

• This reply was modified 8 years, 2 months ago by mwarbinek. Reason: added content
• This reply was modified 8 years, 2 months ago by mwarbinek.
• This reply was modified 8 years, 2 months ago by mwarbinek. Reason: added content
• This reply was modified 8 years, 2 months ago by mwarbinek. Reason: added content
• This reply was modified 8 years, 2 months ago by mwarbinek. Reason: added content
• This reply was modified 8 years, 2 months ago by mwarbinek. Reason: added content
• This reply was modified 8 years, 2 months ago by mwarbinek. Reason: added content
• This reply was modified 8 years, 2 months ago by mwarbinek. Reason: added content
• This reply was modified 8 years, 2 months ago by mwarbinek. Reason: added content

Hi

For this use below code in custom css Field (Theme Dashboard >> appearance >> customize >> header setting >> custom css Filed)

img.alignnone.size-full.wp-image-644 {
width: auto !important;
}

then save and check your website

Any confusion let me know

Thanks.

Hi

For this use below code in custom css Field (Theme Dashboard >> appearance >> customize >> header setting >> custom css Filed)

img.alignnone.size-full.wp-image-644 {
width: auto !important;
}

then save and check your website

Any confusion let me know

Thanks.

Awesome thanks! That fixed it, you guys are great!

ok now it is doing this

https://www.bisericaviatanoua.ro/valorile-esentiale/

the first pic is the right size, but all the rest are huge?

what does this mean? the images are just in the text box of the page.
I have never seen a wordpress do this, thanks
J

Its also doing it on other pages.

https://www.bisericaviatanoua.ro/departamente/

Hi

For this using below code in custom css Filed

.blog-post-title-wrapper .alignnone
{
width: auto !important;
}

any confusion let me know

Thanks.

awesome thanks, that did it!

Hi

If you happy with this theme and support, plz share your feedback refer below link

https://www.ads-software.com/support/theme/wallstreet/reviews/#new-post

Thanks.

On the second link: https://www.bisericaviatanoua.ro/departamente/

Did you insert an image in to the document and also added a Featured Image?

Visual appeal is lost with the images resting the way they are and it appears you included an image at the beginning of the document and a Featured Image which also places it at the beginning of the document.

If so, this duplication creates an unappealing layout.

I suggest to remove the images at the beginning of the document and leave the Featured Image since normally the Featured Image is the one that shows on the blog list page.

HI @justinwhi

There is a small issue in the css snippet. If you change the image alignment to left than the image will not gets scaled to 100%. Basically, placing image to left,right and center positions the image will not be scale to 100%.

In case of none alignment the image are getting scaled, which we will fix in the next release.

If you want to do it now with your current alignment ie the none aligned image than use this css snippet

.blog-post-title-wrapper .alignnone,
.blog-post-title-wrapper-full .alignnone,
.blog-post-title-wrapper #attachment_907,
.blog-post-title-wrapper-full #attachment_907{ 
       width: auto !important;
}

Regards
Priyanshu