Images do not resize

Hii david,

Go to Dashboard -> Appearance -> Customize -> Theme Options -> Theme General Options -> paste the below CSS in Custom CSS box and save –

.header_section {
    background-size: cover;
}
.enigma_blog_post_content img {
    height: 219px;
}

Thanks.

I appreciate your help, but that didn’t fix it. Please review page at https://davidskirk.org/wpsamp/lets-talk/ When you resize the browser screen, the heading – which is the proposed 2000 x 100 size – it appears as multiple lines. And the photo of the two men is flattened, but still squeezes and does not resize. I do hope this can be corrected, as the theme is really attractive. Thanks for whatever assistance or tip you might provide. Thanks,
david

Hii david,

Go to Dashboard -> Appearance -> Customize -> Theme Options -> Theme General Options -> paste the below CSS in Custom CSS box and save.

.header_section {
    background-size: cover;
    background-repeat: no-repeat;
}
.enigma_blog_post_content img {
    height: 226px;
    max-width: 92%;
}

Thanks.

Thanks, but results are the same: https://davidskirk.org/wpsamp/lets-talk/ Thanks for trying.
david

Hii david,

Please send the screenshot of your issue.

Thanks.

The screenshot is at https://1drv.ms/u/s!AoFASiMtbzVNgQhMrfCLcH9n28x3 You can also see it by going to https://davidskirk.org/wpsamp/lets-talk/ and reducing size of browser window to approximate smartphone size. The header image is the recommended 2000 x 100 yet folds into three images instead of resizing. The photo of the two people is squeezed, no resized, and the white space is large.
Thank you,
david

Please disregard prior response. THat was an earlier screen shot. The heading is now reformatting properly (A BIG THANKS!!!) but the white space is large and the photo of the two people never resizes, just squeezes. One screenshot is a smartphone view and the other is a desktop view. The photo is very squeezed. Any tips on fixing the white space and resizing photo will be much appreciated.

https://1drv.ms/u/s!AoFASiMtbzVNgQprcvP0vLvGnUpv

https://1drv.ms/u/s!AoFASiMtbzVNgQkvFIou7xAo5S83

Hii david,

Please remove the previous given CSS from Custom CSS box –

.enigma_header_breadcrum_title {
    padding-top: 148px !important;
}

and paste the CSS in Custom CSS box and save.

@media(min-width:1200px){
.enigma_header_breadcrum_title {
    padding-top: 148px !important;
}
}
.enigma_blog_post_content img {
    height: 249px;
    max-width: 94%;
}

You can give height and width as per your requirement.
Thanks.

• This reply was modified 7 years ago by weblizar_support.

Looking GOOD! That worked wonders. I have only one remaining problem: the photos of the two people don’t resize proportionately. Instead they just squeeze closer together. If phtos on pages would resize properly, my site will look great. Thanks for your patience and assistance. Please advise on this one final request. I really like the overall look. Thank you. If you view the page at https://davidskirk.org/wpsamp/lets-talk/ and slowly reduce browser size, you will see the issue.
Thank you,
david

Hii david,

Paste the below CSS in Custom CSS box and save –

.enigma_blog_post_content img {
    height: 200px !important;
}

Thanks.

That just flattened the photo. It was 249px in your prior fix and you reduced it to 200px. And none of the changes has caused resizing. View at https://davidskirk.org/wpsamp/lets-talk/ I’m thinking that getting photos to resize proportionately may be a feature that just doesn’t work in this release of the theme. However, I sincerely appreciate your help in pursuing this. If you have more ideas, I’ll be glad to try them. Thank you,
david

So You want the 449px size of the image for the desktop ??

So you can use the below CSS code.

@media (min-width: 1200px){
.enigma_blog_full .enigma_blog_post_content img {
    height: 449px !important;
}
}

Thanks.

I appreciate your desire to help, but the problem has always been that pages created by the user are NOT responsive. That is, as the screen gets smaller, the photos do not get proportionately smaller. Instead, they just get squeezed. See this example from your latest solution:
https://1drv.ms/u/s!AoFASiMtbzVNgQtCgErZtGoRpz7o or just use the URL of https://davidskirk.org/wpsamp/lets-talk/ and make browser window smaller. The page looks out of proportion in tablet view and even worse in smartphone view. The page looks fine in full screen, but just gets squeezed when viewed on smaller device.

To me, the theme can’t be called responsive if user-created pages are not. I encourage you to create some user pages with a large photo and test for a future release of the theme. Thanks again for your efforts.
david

Hii david,

Paste the below CSS in Custom CSS box and save –

@media(max-width:480px){
.enigma_blog_post_content img {
    height: 250px;
    max-width: 94%;
}
}

Thanks.

Thank you. That sets the photo properly but *only* at 480px width. However, the photo is squeezed when not exactly at that width. If you slowly resize your browser view, you will see that the photo squeezes, looks okay, then squeezes more, then looks okay again as the screen size diminishes. I think your problem is that you kept trying to set the height.

SO, I did some investigation on my own and fixed it myself. I replaced what you gave me with this:

.enigma_blog_post_content img {
height: auto !important;
width: auto !important;
}

The photo now automatically resizes, regardless of desktop, tablet or smartphone. Or change the style.css to :

.enigma_blog_post_content img {max-width:100%; width: auto;
height: auto;}

Finally, everything is working properly. All the best,
david