- This topic has 9 replies, 2 voices, and was last updated 4 years, 4 months ago by David.
-
AuthorPosts
-
December 10, 2019 at 5:16 am #1099710Paddy Cannon
I would like to have a section with an image of a book, with a title above and ranged right of the book the details and some blurb about it, I’ve tried using the tool within wordpress but it doesn’t seem to work…
is there a simple solution around this, not being a coder is proving difficult.December 10, 2019 at 5:53 am #1099735DavidStaffCustomer SupportHi there,
are you using the Block Editor in WordPress?
If so then it should simple enough with a Columns Block, then you can add a Heading Block and an Image Block in one column and a text block in the other column.Let us know.
December 10, 2019 at 6:02 am #1099739Paddy CannonI was just using the sections within GP, is this a plugin (Block Editor)?
December 10, 2019 at 6:09 am #1099750DavidStaffCustomer SupportAah ok – Block Editor is built into WordPress but it doesn’t work inside Sections.
If you want to do this in Sections, then switch to the Text editor view in the section and add this HTML<div class="flex-grid-container"> <div class="grid-item flex-50"> <div class="grid-item-inner"> <h2>Your book Title</h2> <img src="full_url_to_image" alt="Alt name of image"> </div> </div> <div class="grid-item flex-50"> <div class="grid-item-inner"> <p>Your book text</p> </div> </div> </div>
Update it to include your heading, image and text.
Then add this CSS:
/* General and Mobile styling */ .grid-item { padding: 30px; box-sizing: border-box; } /* Desktop styling */ @media (min-width: 769px) { .flex-grid-container { display: flex; } .grid-item { padding: 40px; } .grid-item.flex-50 { flex: 1 0 50%; } }
You can re-use the HTML on as many pages and sections as you need, and only add the CSS once.
December 10, 2019 at 6:24 am #1099758Paddy CannonThat seems to work, is there a way of neatening up the section… to something like this??
December 10, 2019 at 6:26 am #1099763DavidStaffCustomer Supportdo you have a link to the page with the code i provided ? Then i can tweak and send you the updated code.
December 10, 2019 at 6:31 am #1099772Paddy Cannonyes, it’s https://domjoly.tv/books/
December 10, 2019 at 6:47 am #1099786DavidStaffCustomer SupportOk – so we move the H2 outside of the grid container, remove the sizing for the columns and let flex do its magic and then set the image to a minimum size like so:
<h2>Your book Title</h2> <div class="flex-grid-container"> <div class="grid-item"> <div class="grid-item-inner"> <img class="book-image" src="full_url_to_image" alt="Alt name of image"> </div> </div> <div class="grid-item"> <div class="grid-item-inner"> <p>Your book text</p> </div> </div> </div>
CSS:
/* General and Mobile styling */ .grid-item { padding: 30px; box-sizing: border-box; } /* Desktop styling */ @media (min-width: 769px) { .flex-grid-container { display: flex; } .grid-item { padding: 40px; } .grid-item .book-image { min-width: 200px; } }
December 10, 2019 at 7:30 am #1099954Paddy CannonThat seems to be working thankyou!
December 10, 2019 at 7:33 am #1099957DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.