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>
Related
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;
}
The website is https://www.alisamesseroffphotography.com/ and the mobile site margins look awful. We use PhoPhoto in Wordpress, and cannot figure out how to add some margins.
Thanks so much!
What mobile site?
It's literally the same site.
You need to look at ditching or changing the theme.
As the other answer says, look at media queries : using a media query you can change how the page displays depending on the screen size it is viewed on. For instance, you could use this to add padding to the article-content class to force there to be white space around all the content on the page (but not the navigation or header image) which I think would solve your problem.
I think you should probably change the theme, something based on bootstrap would do a lot of the styling on a mobile device for you, and would make the navigation work better.
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"
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.
I have a question about Custom CSS or using a coding block when uploading an image to a page as a logo. I am using squarespace for my website and I need help coding my logo so that it fits on every page. An option is to use Custom CSS or a coding block. I am using the Rally template for Squarespace and my logo has a max capacity unfortunately. What coding do I use to have my logo on each page? My site is www.goodemoments.com. Please help, I would like to officially launch my blog very soon!!
Typically, in Squarespace, the way to put your logo on every page is to use it in the header. That is true for the Rally template as well.
To do this:
Add your logo via edit mode by going to Design > Logo & Title >
Logo Image
Save
The logo will now be used in place of your title ("Goode Moments
| Lifestyle Blog")
Go to the Style Editor: Design > Style Editor
Under "HEADER: BRANDING", adjust the "Logo Width" parameter to
your liking.
Once you've done this, it may then make sense to add some custom CSS via the CSS Editor if some additional minor tweaking is needed.
Yes, so I would like to use Custom CSS, because my logo that I will be using is to small. The width only goes to a certain size and I want it to be larger.