Square Tiles
-
1) How can I make my square tiles image smaller on my page?
2) How can I center the captions on the page and the preview when you click on the image to make it bigger?
=)
The blog I need help with is: (visible only to logged in users)
-
Hello,
To change the size of your background image go to your CSS customization page and add this text.
body.home{
background-size: 90%;
background-repeat: no-repeat;
}Can you be more specific about the captions you are trying to center and what images you want to preview better?
Let me know if you have any other questions
-
It’s not the background image, its the “square tiles” image on my “Materials & Finishes” page under “Granite”. In the preview it’s huge, how can I make that entire media file smaller and center the captions?
-
My apologies, I miss understood you.
Unfortunately when I click on “Materials and Finishes” I got a page not found message. Have you already published the page? -
No, I’m not publishing any pages until I’m finished with the website. Can you still access it in the drafts folder?
-
I don’t think that I can. You can try previewing the page and then copy/pasting me the link for the preview. But I don’t know if that will give me access to your unpublished page or if it will ask me to log in. Worth a shot though.
-
Hi @urbanela, volunteers cannot see your draft posts. As staff though, I can.
1) How can I make my square tiles image smaller on my page?
To have the images smaller in Galleries, my suggestion would be to increase the number of columns and then the software will resize the images. With the granite gallery though (18 images), to have things come out even, you would need to change it to 9 columns so that there would be two rows of 9 (9 x 2 = 18). We can’t really make this sort of adjustment with CSS alone.
The only option I see, would be to narrow the overall width of the content area, and then the gallery and gallery images would be automatically resized for the new narrower width. You can give the following a try and see what you think. I’ve limited this change to this page only by using the unique CSS class for this page that is defined in the opening body HTML tag on the page. The max width was 1100px.
.page-id-1405 .site-content { max-width: 800px; }2) How can I center the captions on the page and the preview when you click on the image to make it bigger?
The following will center all captions on photos. You will have to edit any where you have added spaces to manually center the caption and delete all the spaces. The following though will not center text when you add the text into the post editor below the image, such as on “Standard Wood”.
figcaption, .wp-caption-text { text-align: center; } -
GREAT suggestion, sometimes the simplest things that are right in front of us we forget. I went ahead and did 2 rows with 9 tiles in each row and that shrunk it way down. Thank you for the center caption, that really helped with my designer page. However, for the materials and maintenance page, I would still like my captions on my square tiles image for the granite to be centered as well?
-
Awesome, glad that worked out for you.
I’m not currently seeing any captions on the granite images under “Granite: 70-80% more than concrete”. Am I missing them somewhere else?
-
You have to put your cursor over the granite image and the caption will pop up, its aligned left and I would like to center it. Also, when you preview the page and actually click on the granite images it blows up to a larger view and those captions aren’t centered either.
Thanks! =)
-
This will center align the captions on the materials and finishes page.
.tiled-gallery-caption { text-align: center; }And this will center align the captions when you click on a granite sample and it goes into the carousel.
.jp-carousel-info h2 { text-align: center !important; }Let me know if this gets you what you are wanting.
-
-
- The topic ‘Square Tiles’ is closed to new replies.
WordPress.com Forums 