Full width questions on Zuki
Hi team!
Thank you for the great themes; I just bought the entire bundle today. I have several questions on the Zuki theme and please pardon me as I am a newbie to CSS.
- I managed to take away the side bar using one of the CSS codes you mentioned in the forum. However, is there any way to make my single blog posts and categories pages full-width? In particular, I am looking to have https://tyiusum.com/category/food/ and https://tyiusum.com/kinosaki-onsen-hyogo/ stretch across the whole screen (similar to the “about me” page) with larger images to showcase the photography.
- Is there a way of retaining the side bar for the categories page, while removing the side bar for the single blog pages? The code I am using seems to eliminate both at once. This is the code that I took from the forum (thank you!):
#blog-sidebar { display: none; } @media screen and (min-width: 1400px) { .single-post #primary { float: initial; margin: auto; } } - What CSS should I look at to edit the font style and size of the primary menu?
Apologies for my many questions.Any help would be very much appreciated!!
Regards,
Sum
tyiusum and 
Marc (Support-Team) are discussing.
Marc (Support-Team) 3:00 pm on March 6, 2017 Permalink
Hi Sum,
1) adjusting the second part of the code mentioned above as follows should be a start for your changes:
@media screen and (min-width: 1400px) { .single-post #primary { float: initial; margin: auto; width: 100%; } }2) You can adjust the first part of the code as follows:
.single #blog-sidebar { display: none; }Now the sidebar should only disappear on single post pages.
3) Most browsers provide a tool to inspect the used CSS code of elements. Simply right click on an element and select “Inspect Element”, “Element Information” or else and the tool will open. It shows the used CSS and how to address the elements in custom code.
Best,
Marc
tyiusum 4:34 pm on March 6, 2017 Permalink
Hi Marc,
Thank you for your comprehensive reply!
1) I used the adjustments of your code and pasted them using the Simple Custom CSS Plugin. However the only change was the featured image that became full-width. The rest of the images and main blog content were left-justified and do not stretch across the screen as seen here: https://tyiusum.com/arabica-kyoto/. Would you have any advice to make it full width and centralised? Apologies for the trouble caused.
2) works just great! Thank you.
Regards,
Yiu Sum
Marc (Support-Team) 10:58 am on March 7, 2017 Permalink
Hi Yiu Sum,
now you can add the following snippet to your media query (second part of code) and use a plugin to adjust the content width to 1200 pixels, because the Photon and Tiled Gallery feature of Jetpack is limiting the content to the default value.
.single-post #primary .entry-content { max-width: 100%; }Best,
Marc
tyiusum 8:09 am on April 26, 2017 Permalink
Hi Marc,
Thank you for your help. I have changed the CSS and downloaded the custom content width plugin to adjust the width to 1200px.
However, there are still some issues with the full width.
1) When the browser is maximised, the content shows up as full width. However, the right side of the content is cropped off.
2) When the browser is minimised from the initial full width status, the content once again shrinks to become ~60% of the browser instead of 100%. The size stays at 60% even when I maximise my browser again.
You could use my single post page here as an example: https://tyiusum.com/kinosaki-onsen-hyogo-japan-part-i/.
Any help would be appreciated! Thank you in advance.
Regards,
Yiu Sum