mapped graphic OVER a background image?

On the laptop, it is still to the left side of the screen.

On the iPhone it is fitting correctly, but hoping to get rid of the extra space above the pic. If not, I can live with that… but the laptop version still needs to be centered.

https://prnt.sc/sos85i

Hi @mrswwonka

Please apply all below CSS:

@media (min-width: 1025px) { .page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    margin-left: 165px;
} }

@media (min-width: 480px) and (max-width:768px) { .page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    margin-left: 20px;
} }
@media (min-width: 769px) and (max-width:1024px) { .page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    margin-left: 30px;
} }
@media(max-width:680px) { .page-id-19 .mb-0 {
    margin-bottom: -160px; }
    .page-id-19 .site-footer {margin-top:-200px; } }

Hi @bizanimesh

Sorry, but still not working correctly.
Now it has shrunk the map on the laptop and still to the left.

https://prnt.sc/sp26ko

iPhone looks good though

• This reply was modified 4 years, 6 months ago by mrswwonka.
• This reply was modified 4 years, 6 months ago by mrswwonka.

Hi @mrswwonka

Can you please send me all CSS that you have in the Additional CSS section?

I can’t from my phone right now and I’m in
bed but I’ve been copying what you tell me to and replacing the old code with the new one that you give me.

• This reply was modified 4 years, 6 months ago by mrswwonka.

Hi @mrswwonka

If that is not working then please send me all CSS that you have in the Additional CSS section.

Hi @bizanimesh ,
Here is what’s in there right now….

1
@media (min-width: 1025px) { .page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
2
    margin-left: 165px;
3
} }
4
?
5
@media (min-width: 480px) and (max-width:768px) { .page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
6
    margin-left: 20px;
7
} }
8
@media (min-width: 769px) and (max-width:1024px) { .page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
9
    margin-left: 30px;
10
} }
11
@media(max-width:680px) { .page-id-19 .mb-0 {
12
    margin-bottom: -160px; }
13
    .page-id-19 .site-footer {margin-top:-200px; } }
14
?

Hi @mrswwonka

Sorry for the late reply.

Accordingly, you have the only CSS in Additional CSS that you have provided me in your last reply, and you have no other CSS. Right?

So taking this as a situation, please delete all CSS that you have provided me in your last reply from Additional CSS section.

And after that please copy and paste below CSS there:

@media (min-width: 1025px) { .page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    margin-left: 165px;
    max-width: 1000px !important;
} }

@media (min-width: 480px) and (max-width:768px) { .page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    margin-left: 20px;
    max-width: 1000px !important;
} }
@media (min-width: 769px) and (max-width:1024px) { .page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    margin-left: 30px;
    max-width: 1000px !important;
} }
@media(max-width:680px) { .page-id-19 .mb-0 {
    margin-bottom: -160px; }
    .page-id-19 .site-footer {margin-top:-200px; } }

It will solve the issue. ??

YAY!!! That’s it!!!!!

THANK YOU SO MUCH!!!!!!!

Happy to help. ??

Hi @bizanimesh
Is it possible that the code is effecting ALL of the images on the site? Other images I have on pages ???

Hi @mrswwonka

I have used page-id in CSS.

No, it will not do anything to all other images on your site.

It can only change the style of the images of that page.

So nothing to worry about this. ??

Ok because I’m having an issue with another graphic on another page not resizing no matter what I do. Must me code or settings somewhere that I’m missing.
Thanks again !

Hi @mrswwonka

To deal with this confusion, you can test that page after removing the CSS that I have provided to you. ??

Hi @bizanimesh,
Is there any way that you could explain the code that you gave me so that I can edit it for another page?
I need a image to be almost the full screen as opposed to the map that only needed to be large and centered.
I copied the code you gave me but changed the page ID and it worked as far as making it larger but I need to know what parts to edit in the code to get the look I need.

Thanks so much!