Here's is the link to my client's site:
http://contentchilly.com/
I opened editor in Wordpress and found only one slider related PHP. I do not know PHP but have an idea. So I found this file named "tc_voila_slider.php" and found that it had 3 lines like :
<img width="1170" height="500" src="<?php echo TC_BASE_URL ?>inc/img/colonnes.jpg" class="slide wp-post-image" alt="<?php _e( 'Create beautiful sliders','customizr') ?>">
In all three lines, I changed the width to 500 and height to 200, but it's not showing any change. How do I modify the widths and heights of my banner on slider? It's just stretching my banner images. Also I want to move the slider up a bit. There's a lot of space empty and below the sliders, there are 3 circles that I want to show users on home page so they don't have to scroll down. How do I get rid of extra spaces?
Edit
Also, I put this code in style.css after inspecting the images in firebug; it's no use either.
.slide .wp-post-image {
width=200px;
height=200px;
}
In customizr you can add some custom css in style.css, just edit it and modify the slider with adding the lines below :
.carousel-image img {
width: 200px;
height: 200px;
}
This should works
EDIT
To change the position of the slider you have to modify the .carousel .item, reduce the height` will make it higher in your page for ex.
To reduce the space between the slider and the 3 circles you can delete the margin-top instruciton in #main-wrapper.
As you probably know, it's pretty hard to answer to this type of question whithout having the whole graphic layout. CSS can be pretty hard to configure, especially when you got many parameters as here.
Here's a way to set the Customizr slider's height to 250px. Change the value to your needs.
/* Adjust the Slider Height */
#customizr-slider.carousel .item {
height: 250px;
min-height: 250px;
line-height: 250px;
}
I would recommend to make your customizations either in the custom CSS section of the customizer option screen, or in the style.css file of a child theme (http://www.themesandco.com/snippet/creating-child-theme-customizr/).
Hope this helps
Related
My shop page back-end is using WooCommerce + elementor.
The cart page is boxed to avoid a messy layout look on larger screens:
the top section is stretched to full width:
Issue:
The woo notice that appears when you update your cart quantity or remove an item from the cart appears as a boxed view (as it coincides with the width of the "cart" section - which is set to boxed- 1200px)
How can I have "just the woo notice set to full width (no matter the screen size) without needing to make my whole shop page full width?
*I tried to set the wrapper to (width: 100vw), but no luck
video sample: https://streamable.com/euksnx
Thank you for your help.
after looking into your website, I noticed where the issue lays. The .woocommerce-message has a width of 100vw. This is why it sticks out of the parent. If you simply remove this, it will show as expected.
If this is styling you didn't apply and can't remove, overwrite it in your child theme with the following class
.woocommerce-notices-wrapper .woocommerce-message {
width: 100%;
}
As this is WordPress and sometimes your CSS doesn't want to overwrite, you can always resort to using !important for width. However, I think it's better if you try to see if it will work without it.
Image with 100VW what it is now:
Image with 100% class
To stretch the banner full width as requested in the comments, add the following CSS:
.woocommerce-notices-wrapper .woocommerce-message {
margin-left: calc(50% - 50vw);
width: 100vw;
}
I have a problem on my wordpress blog with the way posts are shown on the main page, and I think it's due to the size inside css/html, but I don't manage to find a solution. I'm asking for help.
The blog can be found at the URL: http://pavilionmagazine.org
As you can see on the main page, each post has the same size (due to css .post height: 600px; but when you mouse over they change size). I've managed to make the photo size the same, the excerpt to be the same number of characters, and the .post box is 600px high.
However, when you mouse over the posts they change their size and some of them (2nd, 5th, 8th posts from below) switch position. Why is that happening?
Because of each posts' size the grid has errors in it.
Why can't the posts be aligned, occupy the same size and make part of a nice fluent grid?
Thank you in advance :)
.post:hover needs to have a fixed height. Take a look at the two:
.post:hover {
height: auto;
}
.post {
height: 600px;
}
The auto height of post:hover right now is overriding your fixed height on .post.
As for position, inspect the two and see what else is being overriding by the hover values. Keep hover overrides to a minimum.
It seems that the .post boxes height is set to auto on mouseover.
So you have to edit your style.css file, line 350 and delete the css rule: height:auto;
Also, there are a lot of duplicated css rules on .post:hover. You can delete all and try this:
.post:hover {
background-color: #eaeaea;
}
When my website breaks at 800 pixels, my photo on this page moves above the text which is correct, but it also scales up to the width of my site, which is bad. How can I make it stop scaling up. I want it to always be the same size, about 392 pixels wide. I tried the code below, but it doesn't seem to work.
img { max-width: 392px !important; height: auto!important;}
now its doing this, locking the footer to the bottom. Ugh.
Option A
If you want it to always be the same size, change your css to this:
img {
width: 392px;
}
Here's a fiddle with both your original code and my answer. http://jsfiddle.net/DrydenLong/Rs5F5/
UPDATE
Option B
Since you cannot edit the existing CSS, add the following code, but make sure it is loaded after the existing CSS.
img {
max-width: 392px;
}
Option C
Or, if you have access to the HTML I would recommend using inline styles to do this. Something like below would also work.
<img src="..." style="max-width: 392px;">
I'm rather clueless with regards to CSS, and trying to use the free Tumblr theme 'Astronaut'.
Currently I'm trying to figure out how to scale images proportionally for the 'face' of the blog (which is in a three-row style) while keeping the image intact in the main posts itself. I've tried figuring out where to place the width:300px (though that's only a guess as to what the max width of each 'row' is) and height:auto tags in their block, but it doesn't seem to be working. This is exclusive to text posts, image posts work fine.
The site, for reference.
And a pastebin of the layout.
Thanks for any help you can give me.
Try again what you mentioned in your question by adding height: auto; into your CSS:
#container .box img {
max-width: 100%;
height: auto; /* add this! */
}
This should scale the image down to the available width of the parent element if the image is larger and keeps the correct proportions of your image.
I want the WordPress sidebars to have a specific height, NOT equal to the content to the post/page. Just 400px, for example. I'm working with atahualpa.
Which code in which PHP do I have to hack?
If I understand you correctly, you are going to want to edit a relevant CSS file--nothing more.
Figure out which selector is appropriate for the container you want to limit and add the attributes:
height: 400px;
overflow: hidden;
Or overflow: auto; If you want scrollbars to appear.
No php, do it in your theme's css file.