Change full width page template, post navigation and WooCommerce pages

Hi Aigar,

My website is up now:

I’d like to know how to fix the following issues, please:

1.) When you click on an image in a gallery, have it sent to a full-width page (i.e. no sidebar), but still have previous/next buttons.

Same goes for the ‘Shop’ Page when I make it live.

2.) In the following page, the ‘previous/next buttons’ on the image pages don’t lead to the whole gallery shown in the original ‘Studio’ Page (just two images instead):

3.) Can the font be changed on the slideshow captions? As well as the transparency of the background.

4.) The slideshow on the main page has a grey line on the far right. Are my images too short?

5.) I’ve tried making all of the Pages relating to the Shop ‘private/draft’, but they still show up…how can I hide the Cart on the far right of the menu bar?

6.) The slideshow captions disappear in mobile view. Is that normal?

Thanks and sorry for the long list!

Kind regards,
NH

Hi NH,

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

1.) When you click on an image in a gallery, have it sent to a full-width page (i.e. no sidebar), but still have previous/next buttons. http://www.naohoa.com/gallery/ http://www.naohoa.com/about/the-studio/ Same goes for the ‘Shop’ Page when I make it live.

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 -> Apperance -> Theme Options -> Other -> Custom CSS

body.attachment.page div#primary {
  width: 100%;
}
body.attachment.page div#secondary {
  display: none;
}
2.) In the following page, the ‘previous/next buttons’ on the image pages don’t lead to the whole gallery shown in the original ‘Studio’ Page (just two images instead): http://www.naohoa.com/about/the-studio/

Some images in the gallery are redirecting to the 404 page not found page like Peek-a-boo! – NAOHOA so please make sure you have configured the gallery correctly and also tell me whether you are creating this gallery using default WordPress gallery shortcode or anything else.

3.) Can the font be changed on the slideshow captions? As well as the transparency of the background.

You can achieve this using the following CSS code.

#main .carousel-caption {
  font-family: arial;
}
#main .carousel-caption h4 {
  background: rgba(84, 57, 126,0.5);
}
#main .carousel-caption p {
  background: rgba(0, 0, 0,0.3);
}
4.) The slideshow on the main page has a grey line on the far right. Are my images too short?

The images are not too short but a bit as the slider needs images having minimum size as 1110 X 600 pixels but your image sizes are 1100 X 600 pixels so they are 10 pixels smaller than minimum required images size.

5.) I’ve tried making all of the Pages relating to the Shop ‘private/draft’, but they still show up….how can I hide the Cart on the far right of the menu bar?

It seems you are using WooCommerce to create shop on your site so could you please tell me which are those Pages related to the Shop so that i can test it on my test site?

Are other pages not related to shops working fine?

6.) The slideshow captions disappear in mobile view. Is that normal?

Yes it’s normal because it’s hidden intentionally as on smaller screen it doesn’t fit feel in screen size but you can use the following custom CSS code to only display the caption title reducing its size on mobile devices.

@media (max-width: 767px) {
#main .carousel-caption {
  display: block;
}

#main .carousel-caption p{
	display: none;
}
#main .carousel-caption h4{
  font-size: 15px;
}
}

Best Regards,
Movin

Hi Movin,

Thank you so much for spending your time to respond to each request! I’ve solved most of them using your solutions, so now there are only a few things I’m still struggling with:

1&2.) The side-bar appears on pages that aren’t full-page and links to other images in the gallery. I just use Wordpress’s “Add Media > Create Gallery” function to make them and don’t know how to solve this issue any further.

The first two images (buddha and rose quote) lead to separate links with a side bar, while the rest function properly.

The image links in this one are all over the place.

5.) If you click on the Cart on the far right (http://www.naohoa.com/shop/), all the links there work fine (although they all show the side bar, hah). I’m glad they work but I’m actually trying to hide them all until they’re ready to launch. Whenever I try to change the Post status to “Draft”, it gets overridden to “Publish”. A bit of code to hide the cart would be an easy fix for now, imo.

One more thing:
7.) Is there a way to disable Mobile View? It doesn’t look good…since the site functions fine in Desktop Mode on phones, I’d rather that was the default, if poss.

The Mobile View shows up with a blue header, a bunch of numbers (they might correspond to the number of slides?) and no links to other content at all. It’s confusing my visitors!

Kind regards,
NH

UPDATE:
I found a way to hide the cart using code Aigar posted on another thread:

.navbar li a.woomenucart-menu-item {
    display: none;
}

The ‘Shop’ is still live, if you want to look at it anyway and advise how to make the pages go to full-width:

Thanks again,
NH

You can make WooCommerce pages full width without sidebar by adding this simple CSS to Appearance >> Theme Options >> Other >> Custom CSS

.woocommerce #secondary {
  display: none;
}

.woocommerce #primary {
  width: 100%;
}

Let me know if this helps.

Hi Aigars,

Thanks again, that worked a treat! Any advice for the post before my last one?

1&2.) The side-bar appears on pages that aren’t full-page and links to other images in the gallery. I just use WordPress’s “Add Media > Create Gallery” function to make them and don’t know how to solve this issue any further.

The first two images (buddha and rose quote) lead to separate links with a side bar, while the rest function properly (i.e. prev/next buttons work correctly, but the first two are isolated - even though they’re in the same Gallery in the Page).

The image links in this one are all over the place.

7.) Is there a way to disable Mobile View? It doesn’t look good….since the site functions fine in Desktop Mode on phones, I’d rather that was the default, if poss.

The Mobile View shows up with a blue header, a bunch of numbers (they might correspond to the number of slides?) and no links to other content at all. It’s confusing my visitors!

Blocking Mobile View is super important to me as many people are getting confused or simply waiting 'til they’re at their desktop to view my website, then most likely forget about it.

Kind regards,
Naomi

(very nearly there - thank you for the great customer support!)

Hi NH,

1&2.) The side-bar appears on pages that aren’t full-page and links to other images in the gallery. I just use WordPress’s “Add Media > Create Gallery” function to make them and don’t know how to solve this issue any further.

The first two images (buddha and rose quote) lead to separate links with a side bar, while the rest function properly.

The image links in this one are all over the place.


You can make those pages full width using the following CSS code.

body.attachment.single.single-attachment div#primary {
  width: 100%;
}
body.attachment.single.single-attachment div#secondary {
  display: none;
}

7.) Is there a way to disable Mobile View? It doesn’t look good….since the site functions fine in Desktop Mode on phones, I’d rather that was the default, if poss.

The Mobile View shows up with a blue header, a bunch of numbers (they might correspond to the number of slides?) and no links to other content at all. It’s confusing my visitors!


To achieve this you can just try editing the header.php file in your child theme removing the following line of code from it.

<meta name="viewport" content="width=device-width, initial-scale=1">

For your convenience i have attached the child theme to this reply containing this change so you can just use it.

Regards,
Movin

Hi Movin,

Huzzah, everything works perfectly! Thank you both so much!!

Thanks for your patience. :slight_smile:

Kind regards,
Naomi

Hi Movin,

Spoke too soon. When I click on other pages (e.g. Services & Products > Bespoke Tattoos), it reverts back to Mobile View.

Is there a way to completely disable Mobile View on all pages?

Kind regards,
Naomi

Hi Naomi,

It seems working fine for me the page http://www.naohoa.com/services/bespoke-tattoos/

Could you please try clearing your browser cache?

Is this the only page where you are having the issue?

Regards,
Movin

Hi Movin,

Thank you for the speedy response. The whole thing appears to be loading on Mobile View automatically now. Please find attached a screenshot of the front page.

As you can see, it looks completely different in colour scheme and lists the number of slides for no real reason. As for which pages work/don’t work in Desktop Mode (automatically), it’s really sporadic - sometimes it works, other times it changes its mind after visiting another page.

I test it on my phone (Nexus 4) using Chrome in Incognito Mode, so that no data is saved. My partner has been testing it on his phone (also Nexus 4) using Chrome and Firefox.

Is there a way to completely disable it, since the template is responsive and so doesn’t need it?

Kind regards,
Naomi

Hi Naomi,

I could also confirm the issue on my Sony Xperia C4 mobile on chrome browser that some time it works and sometime it doesn’t work because it displays the Jetpack mobile theme as you are using Jetpack plugin on your site.

Find information about Jetpack mobile theme on the following pages.

To resolve the issue you can just deactivate the Jetpack mobile theme as described in the following reply.

Regards,
Movin

Hi Movin,

Thanks so much for discovering the issue - it all woks fine now. :slight_smile:

Cheers to you and Aigars for the excellent support! I’m really happy with my website now.

Kind regards,
Naomi

You are always welcome here :slight_smile: