-
Hello, I am having trouble center aligning the images in my inner container with fixed width of 720.
I want the images to be 880 px wide, spreading out of the container, so 80 px is on the left and 80 px on the right of the fixed container.
I tried this CSS, to affect only that particular page with ID 10595, not any other page or post on my site. I also want the very first image on my page to be 1200 px wide, and the others 880 px. I would the images to spread to the orange box (880px). https://imgur.com/dlJCB1g
/* First image on the page */
.page-id-10595 .wp-block-image:first-of-type img {
width: 1200px !important;
max-width: none;
margin-left: auto;
margin-right: auto;
}/* Other images on the page */
.page-id-10595 .wp-block-image img {
width: 880px !important;
max-width: none;
margin-left: calc((100% – 880px) / 2);
margin-right: calc((100% – 880px) / 2);
}/* Ensure that the images do not get constrained by the container */
.page-id-10595 .container img {
max-width: none;
}Any help is appreciated!
Mihail.
-
Hi there,
Have you resolved this issue? The image now appears to be centered and has the correct dimensions:
https://cln.sh/927y7zzx -
Hello Alvind, thanks for the reply.
No, unfortunately the issue isn’t resolved yet. https://imgur.com/rBeYVD8
You can check it here.
Thanks
-
Hi there,
can you disable the WP rocket and any other caches on the site, as currently the link provided is loading without styles.
I would recommend leaving them disabled whilst developing the site.
-
Hello David, thank you for the recommendation.
I just disabled my caching plugins.
What do you think I should do next?
-
Do you have a CDN or any other caches on the site ?
As when I view the link provided I do not see all the styles loading -
Hello David, I have Bunny CDN, but that is deactivated at the moment.
To my knowing, I don’t have any other CDN or other caches to my site.
Thank you.
-
Ok, it’s loading correctly for me now , I assume the CDN had cached the page
So is the issue just the space below the images now ?
If so you can add a default gap with this CSS:.gb-block-image { margin-bottom: 1.5em; } -
Hello David, thank you for the reply.
Unfortunately, the images still stay contained to 720 px (red lines, inner width of the container) on my end.
You can see that on this screenshot.
They aren’t spreading out to 880 px, the original full size they are uploaded at (yellow lines).
Can you please send me a screenshot of how you’re seeing the page from your end, if possible?
Thank you!
-
Ah. Try this CSS instead for the content images:
@media(min-width: 900px) { .page-id-10595 #page .gb-block-image { width: 880px; margin-left: calc( ( 100% - 880px) / 2 ); margin-right: calc( ( 100% - 880px) / 2 ); margin-bottom: 2em; } } -
Thanks David! Now this is exactly what I was looking for!
This works great.
Just one more thing, I also would like the images on my page before “CHAPTER 1
What is a vacuum bell” to be 1200 px wide as the container is set to, and the others 880 px just like it is now.Also, I notice that the page gets spread out on the right on mobile, so you can swipe on the right, and you have to zoom out to see the entire contact. Is there a way to stop this CSS on mobile and tablet, if this CSS is the cause of this issue?
Any help will be appreciated!
Mihail.
-
Try adding this:
@media(min-width:1200px) { .page-id-10595 #page figure.gb-block-image.gb-block-image-c9734660 { width: 1200px; margin-inline: auto !important; } } -
Thanks Ying!
This is what I’ve been looking for. Unfortunately, I still have the problem on my mobile view, where there is a lot of space on the right of the screen.
Can you please check from your end if this is happening too?
Any help is appreciated.
-
The issue is not from the image, but the containers, you have some containers that have fixed widths, so your content overflows on mobile.
You need to fix those containers first, if you need to set a fixed width, make sure you also set their
max-widthto100%.or unset the fixed width by set the mobile
widthtounset. -
Thanks Ying, this was exactly what I needed! 🙂
Have a great day!
-
You are welcome and thanks 🙂
- You must be logged in to reply to this topic.