-
Posts
-
Hello, I am trying to be able to make a post look like the following: http://search.stillsmallvoicetriage.org/message.php?id=814&langCode=en-US
I want the picture in the upper left and the text to the right and have the text once reaching passed the picture height, move to the very left.
The issue is I have tired to duplicate this with what Enfold provides and can’t get it right. I tired doing a 2/5ths column containing a picture and 3/5ths column containing a text box and eliminated the spacing between columns. Then if there was too much text I would guess and cut the text off and put in a 1/1 column under the above mentioned columns with a text box. However this turned out awful.
The resolution of different screens causes the text and spacing to be all over the place.
I also notice with the page I am trying to mimic, it’s scaling images based on the viewers screen resolution. I can’t get Enfold to do this.
I somehow need a picture feature that has text wrapping that also will do scaling based on resolutions. I know it’s a simple layout, just how can it be done?
Thanks for your time.
Hey D1992_WP,
When inserting a picture in your blog post, WordPress allows you to change its alignment to the left, center, right, or none. From your description, you need to set it to Left Align. To do this, please fine “Attachment Display Settings” near the “Insert into Post” button when inserting your picture, and set Alignment to “Left”. If the picture is already in your post, that’s okay! Just click on it, and then click on the Align Left icon that will appear as an option. WordPress has a step by step tutorial on this here: https://en.support.wordpress.com/images/image-alignment/
Is this the solution you’re looking for?
Best regards,
SarahHi Sarah,
Sorry for the delay. Thanks for that bit of advice, that worked. However, I am wondering about two more things.
1 – Padding/Spacing between aligned picture and text. The text is very close to the picture and would like some additional padding.
2 – Adaptive images, I think I need a plugin for this, but am wondering if it’s possible for Enfold to do it without one. Basically, the website I am trying to mimic, the featured image resolution changes based on the resolution that I am viewing it in. If I set my computer’s resolution to 1024×768, the image size with be 332×223, if I set the resolution to 1366×768 the image size will be 400×269. I am wondering how to do the same so that smaller screens aren’t forced to view huge images that take up most of the width of the page.
On my website, the images are the same size regardless of resolution.
Thanks for your help!
Hi,
1 – Yes, you can change the padding. Please try adding something like this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
body img.alignright { margin-top:10px; margin-left:10px;} body img.alignleft { margin-top:10px; margin-right:10px;}You can increase the margins to fit your preference.
2 – This is the way that Enfold is responsive. I’ll check with the rest of the team if there’s a way to change it. Otherwise, you might have to use another plugin. We’ll get back to you on that.
Best regards,
SarahHi!
You can set paddings and image size in percentage, or you can write different sizes for images and paddings in pixels for different screen sizes using media queries. These are two ways to be more responsive.
If you need further assistance please let us know.
Regards,
VictoriaThanks Sarah and Victoria,
Sarah: Your code worked but the hover effect is conflicting with the padding. When putting the mouse over the image the text moves to default spacing. I have tried to remove the image hover effect with the following code:
.image-overlay {
background-color: transparent;
display: none !important;
}Which does hide it, but it does not disable it. The text still moves.
Victoria: Yes, I would like to set that up. The images sizes look just right on a 1080p screen, but viewing on lower like 768p or 1024p, the images take up too much space.
Thanks!
Hi,
Can you please add the code back and give us a link so we can check and be sure we can offer the best solution?
Best regards,
BasilisHi Basilis,
What code are you referring to exactly? Here is a post – http://www.winreflection.com/uninstalling-built-in-store-applications-from-start-menu-with-powershell/
When I use the mouse curser to hover over any of the images, the text moves back to its default padding from the images. I want it so when I hover over the images, the text stays where I have set it, and that’s with the following code below:
body img.alignleft {
margin-top:10px; margin-right:75px; margin-bottom:25px
}In regards to the responsive images, you can also use the post I linked. I want the image’s px size to change depending on the resolution of the screen the user is viewing the content with, like how it does on this blog post – http://search.stillsmallvoicetriage.org/message.php?id=814&langCode=en-US
I am not sure how it can be done.
Thanks
Hi Dexter,
For the alignment, can you please use this code instead:
body a.lightbox-added.alignleft { margin-top:10px !important; margin-right:75px !important; margin-bottom:25px !important; } body a.lightbox-added.alignright { margin-top:10px !important; margin-left:75px !important; margin-bottom:25px !important; }The difference is that we’ll set margins for the link that wraps around the image, instead of setting margins for just the image. I hope that helps.
For the team to try to help you with responsive images, can you provide login access? You may put it in the Private Content section of your reply.
Sarah
Sorry for really late reply, but Sarah that code worked perfect! Thank you! I have decided I am not going to worry about the image sizes per resolution for now. Rather I will focus on content. Thanks!
- You must be logged in to reply to this topic.