[Emory]

I was playing around with column sizes in the Editor (I know, not a good idea) and lost my notes as to the default pixel sizes for the wrapper, main column and one sidebar. Appreciate if you can let me know, and I’ll get them back to where they belong. Site is: https://www.digitalbodies.net The site is working fine but is a little jumpy on a mobile device here and there – probably because I messed something up!

Other question I had: is it critically important to makes sure all featured images are not larger than the 780 x 586 specified in the instructions?

Thanks in advance – Clean Journal Pro is a great theme!

[Mahesh]

Hi @Emory,

Clean Journal Pro theme has multiple layouts, and size for main column varies with respect to the layout option. In your context, you have main content, and a primary sidebar. For this layout, the default widths are as below:

main : 820px
sidebar : 340px
wrapper : 1200px

Default width of wrapper is 1200px which remains the same for all layouts.

As you’ve mentioned, its not a good idea to directly change the code if you want to change some styles, you can always use the Custom CSS in “Appearance => Theme Options => Custom CSS” box or create child theme and add in your child theme style.css file

For featured image, its not that critically important to stick with the image size 780 x 586, you can always use the images larger than this. But you need to make sure the image’s aspect ration is 4:3 because the image will be automatically cropped when uploading. So if the aspect ration mismatches, it may crop some portion of the image itself. If you use the small sized image then it will use the default uploaded image.

If you need any further help on CSS for the above, please let me know.

Thank you for your appreciation.

[Emory]

Thanks for your prompt response – the information is very helpful!

[Susan]

Mahesh, This is probably beyond the scope of this forum …

I don’t know CSS coding. I would like my primary sidebar to be narrower. Do you have a suggestion?

Thanks.

[Mahesh]

@skstewart: Please post in your site URL so that I can help you further.

Regards,
Mahesh

[Susan]

My site is http://www.practicalinspirations.com

Thanks, Mahesh

[Mahesh]

@skstewart: Go to Dashboard=> Apperance=> Customize=> Theme Optoins=> Custom CSS box and add the following CSS:

#main {
    width: 920px;
}
.sidebar-primary {
    width: 240px;
}

@media screen and (max-width: 1280px) {
	#main {
    	width: 820px;
    }
}

@media screen and (max-width: 1152px) {
	#main {
    	width: 810px;
	}
	.sidebar-primary {
  		width: 200px;
	}
}

@media screen and (max-width: 1100px) {
	#main {
    	width: 750px;
	}
}
  
@media screen and (max-width: 767px) {
	#main {
    	width: 100%;
	}
  .sidebar-primary {
    	width: 100%;
	}
}

Regards,
Mahesh

[Susan]

Thank you, Mahesh. I’ve tucked the code away in a file folder so I can use it for changes in the future.

[Mahesh]

@skstewart: Thank you for your appreciation. Have a nice day!

Regards,
Mahesh

[Author]

Posts