Blog Archives - Side Cut Off and Column Sizes - wordpress

I'm working on: https://holisticharmonyinhc.com/ via Wordpress
The homepage is currently set to display the Archives, and if you notice, the main section (not the sidebar) is being partially cut off on the right. The Single Post display do not seem to have this issue, only the Archives display. Wondering how this can be corrected.
Also wondering if it's possible / how to adjust the columns of the Archive display where the feature image is set to a 2:3 ratio (width:height) and the info of the post is centered vertically.
I'm not positive what coding is needed for me to provide, but happy to provide anything requested. Thanks in advance!

Add this CSS in your active theme style.css file
.ruby-section .ruby-content-wrap {
overflow: inherit;
}

Related

wordpress omits width and height declaration on some product images, not others

Hi I have an odd problem with woocommerce product images sometimes omitting the width and height declaration as you can see on https://www.tidybedrooms.co.uk/product-category/hinged-door-wardrobes/.
Looking at the top row of images on that page you will see that the 1st, 2nd and 4th images are displayed mush larger than the 3rd and 5th. The images i have uploaded to WP are all the same dimensions, and the only distinction i can make when viewing source of the correct vs oversized images is that the oversized images omit a tage for width and height, where the correct images do not.
Has anyone experienced this issue, or know how i can resolve it.
Thanks!
It appears that for some reason, the larger images are being displayed as base64 data instead of URLs by default. It is interesting that occurred. Perhaps you can work out why by retracing the steps you used to insert the images for these products vs the others.
As for a quick fix, you can add the following to the theme's custom stylesheet:
.attachment-shop_single {
max-width: 100%;
}

BigCommerce Marketing Banner - Change Size

I have a pretty basic question, and couldn't seem to find anyone else with this issue. I want to reduce the height of the default Marketing Banner (BigCommerce). What code should I enter, and where? When I go to the Theme Editor (Chelsea Warm theme, Stencil/json), I can't find anything on the built-in BigCommerce banner. Looking forward to the advice, and I apologize if it's vague - I'm mainly a marketing/graphics person, just occasionally forced to work with code.
Best,
YT
The default banner size should conform to the size of your banner content, but it looks like the Chelsea theme has some additional padding on the banner that's making it taller. You could enter this CSS into your footer scripts box (under Storefront>Footer Scripts in the control panel) to get rid of the padding:
<style>
.banner.rte {
padding: 0px;
}
</style>​

wordpress: flat theme, change banner size

I am setting up a blog with a new flat theme. I haven't used these before so please excuse me if I don't explain myself well.
This theme, Cordillera, comes with a full screen banner which has text layered over it. The look is great but I'd really like to be able to either a) be able to set the banner size myself or b) have it automatically adjust the container height to the image uploaded. Both being smaller than full screen, which would pull up the content below it.
Not having used this type of theme before I'm not sure what to look at to adjust this. You can check out the demo linked above or on my blog. I'm not even sure what portion of code to pull out to have you start with. If you go to my blog, the section in question is the one with the angel art.
Thanks so much for looking! I appreciate any and all help!
try to add this CSS into your site :
.top-banner {
width: 100%!important;
height: 300px!important;
background-size: contain!important;
}
go to "Appearance > Customize > additionnal CSS"

Picture Framing my images in WooCommerce/Wordpress

I am a photographer and currently attempting to upgrade my site from a Portfolio of my images to a fully functional E-Commerce site.
I have gotten my head around most of the WooCommerce type things I need to do, and I have an idea of what I want. I feel like I can achieve pretty much what I want.
The big problem I'm having is dynamically picture framing my images for sale.
Some examples of what I want:
https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto
https://kenduncan.com/product/docklands-melbourne-vic-vx2101/
Just the ability for me to make a .PNG frame, and have it dynamically added to the background of my images as the variations are selected.
I'm reasonably sure it's a simple coding thing, but I have 0 experience coding.
Any help would be awesome! I couldn't see a simple plugin to do what I want, and I couldn't really see any existing plugin or theme that would add this functionality.
Dan
You don't need to edit the images directly, and I don't recommend it because it requires a lot more work. CSS does the trick!
Since you said you are using woocommerce, I have targeted below the default woocommerce image in the gallery on the single product page.
This is a very basic picture frame - and you can make it a lot cooler if you want it to be (such as a matte)!
.woocommerce-product-gallery__image img {
border: 15px solid #666;
padding: 10px;
}
Add this code to your theme's custom CSS field.
For something like this https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto
You will need some javascript.
Upload the frame png and all frame variations to your WordPress site.
Give your image class padding of variable size.
In the JavaScript code, replace the background image of your image element. Make sure your background is set to no-repeat.
Some CSS tweaking might be needed to get it to look exactly how you want.

Wordpress slider plugin with dynamic height

Cannot find a plugin for creating slideshow (for posts) in Wordpress. Already tried a couple of dozen.
The need to:
responsive, auto width (using max-width, i think)
if img is vertically NOT TO CUT IT! i. e. proportions must be maintained, height varies relative only to the width
it must be free (or freemium)
Wordpress Guru, if you know about these plugins, answer please.
Finally I found solution. If you need good slidedhow with dynamic height in posts use «oik-nivo-slider».

Resources