Soho Theme: How to create page with no featured image (with full width)
-
I have the Soho Theme and I would like to create pages with (no featured image background page). I want my page to then be the full width of the screen (e.g. if I create a page with no featured image now, the featured background page is still created and my primary page is only constrain to partial part of the screen).
For example check out this page, https://iamtheveronique.com/my-journey/
Is there a way where I can create Pages and Portfolio Pages without this feature?
The blog I need help with is: (visible only to logged in users)
-
Hi @vnique!
You can use this CSS to make the content area full width, and hide the button that collapses the page:
.page-id-17 #wrapper, .page-id-17 #content { width: 100%; } .page-id-17 .entry { max-width: 1000px; } .page-id-17 .collapse { display: none; }You’ll notice all of these styles use a page ID – so they target just one specific page.
You can add more pages to them by getting those page IDs.
Then you’d include them like this (I’m just making up a number as an example)
.page-id-17 #wrapper, .page-id-17 #content, .page-id-203 #wrapper, .page-id-203 #content { width: 100%; }using commas like that lets you add more selectors to your styles, so you don’t need to repeat them :) Do that for every page you need to add, for all three of the styles.
-
Thanks this has helped with Pages but, it doesn’t seem to work for Project or Portfolio Pages. For example, I’ve tried it with this project page — https://iamtheveronique.com/portfolio/dreams-deferred/
and it results in no changes. Is there a different path for Project/Portfolio pages?I’ve tried it successfully with these pages:
https://iamtheveronique.com/artist-statement-cv/
https://iamtheveronique.com/my-journey/
https://iamtheveronique.com/contact/ -
Thanks. I figured it out with using postID tags. I do have another similar question on portfolio pages (Soho theme). By default the Portfolio/Project page titles are ‘center’ and I want to ‘left justify’ them.
How can I do that in the CSS globally or at the individual project/portfolio page level?
-
You can target individual projects using post IDs, similar to what you’ve done previously:
.postid-1139 .entry-title { text-align: left; }Or you can change all of the portfolio pages at once:
.single-jetpack-portfolio .entry-title { text-align: left; }Let me know how it looks! :)
-
Thanks this works! I do have another question back to ‘changing the page and portfolio to be full width and without the collapse and featured image. Though, I do that and it seems to work well on the desktop browser, when I view it on my mobile device (iPhone), it goes back to the width of the default template.
How can I make the above changes to page-id and postID to mobile devices too! Thanks.
-
The mobile view does have it’s own widths and margins, yes.
Give this a try!
@media screen and ( max-width: 1120px) { #header, .contentwrapper { margin-left: 0; width: 100%; } } -
-
-
Hi staff-loquaciousloon,
Sorry but I updated that “portfolio page” with adding an image gallery of 3 images (type = square and 200×200). You’ll see the gallery under “CLICK BELOW TO FIND THE STORIES OF SOME OF OUR PROJECT’S ‘DREAMERS.‘”
When I view this “portfolio page” on my mobile device (i7 phone), these mages are stretched out and skewed.
I ran into the same thing the first time I updated your recommended CSS for my full size images but, I went back and updated the max-width to be 1000 and this solved the problem. (see below).
/* section for full width mobile view*/
@media screen and ( max-width: 1000px) {
#header, .contentwrapper {
margin-left: 0;
width: 100%;
}
}I also have the same gallery image on a child “page” for the Project Statement and when I view this page I also get a skewed image though it’s intermittently whether it’s 1 or 2 or 3 of the images.
Is there another level of customization I can do to define this around galleries versus at the page/project page level. Is there a way around this.
They show up fine on my web browser using both MacBook Pro 13″ and Lenovo laptop 13″. I haven’t tried how it’s displayed on 15″ or larger yet.
-
I see what you mean – I don’t think this is actually connected to the CSS we’ve been working on here though!
It looks like a recent change in the code that controls galleries might be at fault. Our developers are working on a fix. I’ll post here again when I have more info!
-
Thanks staff-loquaciousloon. Please let me know when it’s resolved. any idea of target time. Wondering if I should do a plan B…
-
The issue is still being looked into, so I don’t have a specific timeframe yet, but I will keep you posted on this thread when something new develops :)
-
no this doesn’t work. I’ve uploaded the images again and still the same issue. The issues seems as if the first instantiation of the page, I get the skewed gallery images. If I go to another page and then come back to the page with the gallery, the images are then rendered correctly. e.g. it’s always the first rendering of the page that’s wrong .. seems if you refresh or at least go to another page on the site and back .. then it has a better chance of rendering correctly
-
Also I’ve tested other pages and the same thing with Pages and Projects. For some of my prior pages, I went back and check and the issues seems to be with gallery images with SQUARE tile galleries. I have mosaic galleries and full image gallery and I don’t have any issue. Hope this helps to narrow down it.
-
Thanks for the test and info!
The investigation is still ongoing, I’ll keep an eye on it and update you when I know more!
- The topic ‘Soho Theme: How to create page with no featured image (with full width)’ is closed to new replies.
WordPress.com Forums 