Layout sizing

Activello
1

Hi guys!

1) I’d like to increase the size of my blog’s layout, to be as wide as the slider itself. Can you please provide code for that? Right now it’s at 70-80%.
2) On categories/archives/search/tag pages, there is additional 10px padding on the right of the primary content (apart from sidebar padding) and I’d like it to be the same size as on on home page, i.e. 0px.
I’m looking for something similar to this to remove it: .blog.home #page article{padding:0!important}
3) Is there a way to adjust the ratios of the primary and secondary content? I used this suggestion but instead of readjusting, it just became 71% and 29% of its original column size. How do I change it to 75% and 25% overall?

My site: LipstickAlchemist.com

2

Hi @lipstickalchemist,

I hope you are well today and thank you for your questions.

1) I’d like to increase the size of my blog’s layout, to be as wide as the slider itself. Can you please provide code for that? Right now it’s at 70-80%.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.container.main-content-area {
    max-width: 100%;
    width: 100%;
}
2) On categories/archives/search/tag pages, there is additional 10px padding on the right of the primary content (apart from sidebar padding) and I’d like it to be the same size as on on home page, i.e. 0px. I’m looking for something similar to this to remove it: .blog.home #page article{padding:0!important}

I don’t see it on the categories page as shown in the attached screenshot.

Please advise.

3) Is there a way to adjust the ratios of the primary and secondary content? I used this suggestion but instead of readjusting, it just became 71% and 29% of its original column size. How do I change it to 75% and 25% overall?

Use the following custom CSS code to achieve it.

@media screen and (min-width: 768px) {
.main-content-inner.col-sm-12.col-md-8 {
width: 75%;
}
#secondary {
width: 25%;
}
}

Best Regards,
Movin

3

Hi Movin!

Thank you for your help but there are a few issues.

  1. This increases container size, but images remain small. Is there CSS to adjust default sizing of featured images? (I do not want to regenerate thumbnails because that messes up all the social shares)

  2. You did not attach one, but anyway it’s hard to notice. The only reason I noticed is because I’ve added extra 10px padding to the right side of my page headers (the category/tag/archive name that shows on top of those pages) to match the rest of the content.

4

Also, how do I hide the text excerpts on all posts?

5
1) This increases container size, but images remain small. Is there CSS to adjust default sizing of featured images? (I do not want to regenerate thumbnails because that messes up all the social shares)

If you do this using CSS code instead of regenerating thumbnails then it will get stretched.

Is it ok for you?

To help us keep support thread separates could you please create new thread for each of your other questions here Activello - Colorlib Support Forum instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

6

Of course not, Movin! :smiley:

I want it to scale up proportionately. If not CSS, is there any php file I could edit to change default sizing? If yes, please lemme know which lines.

7

Then you have to develop custom code as shared in the following topic.

https://colorlibsupport.com/t/define-sizeformat-of-featured-image-on-home-page/#post-59419

8

In the solution that worked for that user, you have suggested they should regenerate images after using that plugin. Will I have to do so as well? Because I already told you that using the plugin will make the social shares lose their thumbnails which is why I can’t use it :frowning:

9

First check whether the provided solution works for you without regenerating thumbnails but if not then you have to regenerate it.

10

I used Plugin 25 and changed size to 1080x510 (assuming the default size of featured image is 710x335). It didn’t work. This is the plugin’s code:

<?php /*
Plugin Name: Colorlib Plugin
Description: Quick Custom Solution Plugin for Implementing Custom Solution.
Version: 1.0.0
Author: Movin
Author URI: http://freewptp.com/
License: GNU General Public License (Version 2 - GPLv2)
*/

function modify_slider_image_size(){
    add_image_size( 'activello-featured', 1080, 510, true );
}
add_action( 'init', 'modify_slider_image_size', 10 );

Am I doing something wrong?

11

I visited your shared site and it seems you are using Jetpack plugin on your site so could you please try temporary deactivating its Photon module on your site?

This jetpack photon module is not updating the images stored on wp.com so to resolve the issue either disable this module or update the images on wp.com by contacting jetpack support team.

12

On disabling the photon module, all featured images have gone hay wire. Some are full size 1920x550 and some are 710x335. None have taken the 1080x510 ratio from the plugin. (Even after I cleared cache from browser and wp total cache)

13

After that you have to regenerate thumbnails using following plugin.