Shapely Template-Home Duplicate

Shapely
1

Hi,

I’ve duplicated the Shapely Home Page Template. I’ve done all the usual steps, including registering new sidebar etc.

Everything works, except the widgets do not go full width.

Looking at the code, it seems JS is resizing everything during scroll, from a standard 1440px width to 1140px.

Any ideas?

My home page is: http://commonwealthrow.com/
Offending page is: The Row – Commonwealth Row

Cheers,
Richard

2

Let me check it Please use this plugin to create temporary access for us, its automatic login link and does not requires sharing your admin details. here is How To guide. at the and don’t forget about  “Set as private reply” at the bottom of the message box  

3

Hi Noda,

Do you have an email address so that I can set this up for you?

Also, what can you see from the front end? I’ve pretty much been inspecting the code with a web browser.

Regards,
Richard

4

Hi Noda,

It looks to me to be JS, in particular ‘parallax-mirror’. Note the difference in the position left: and difference in the widget width between the two examples.

On the home page there everything works correctly, the JS code shows this:

<div class=“parallax-mirror” style=“visibility: hidden; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; transform: translate3d(0px, 0px, 0px); height: 438px; width: 1440px;”></div>

On the row page (a copy of template-home), the JS code shows this:

<div class=“parallax-mirror” style=“visibility: hidden; z-index: -100; position: fixed; top: -174.188px; left: 150px; overflow: hidden; transform: translate3d(0px, 0px, 0px); height: 193px; width: 1140px;”></div>

5

Hi Richard,

Any email can do but the other option we describe is easier.
The homepage when we look at it is the one set up using widgets in appearance \ widgets - homepage.
That one uses a special page template that goes full width.

Have you tried setting that other page to use full width page template and does it give you the results you want.
If not then you will need to use custom CSS code to make the widgets or page content go full width.

Thanks.

6

Hi,

I have set the page Get Involved to full width, but the feature image still doesn’t go to the edges of the page:

The ‘Row’ page is still on the copied template-home. You can see here that the content seems to want to go full width as some of the text is cut off - it just seems to be the background that has margin?

I think it’s the JS adding 150px of margin left for each widget for some reason. So no matter what is done, as you scroll the JS changes the code on the template-home copies.

I wonder if somwhere in the JS or CSS things are set to only recognise the genuine template-home and not copies?
I’ve added you to a temporary login:

http://commonwealthrow.com/wp-admin/?wtlwp_token=8b9029b0e7d6a8275068be96fa05800c

Many thanks,
Richard

7

Hi Richard,

Could you try this CSS to get the widgets on this page- The Row – Commonwealth Row - to go full width:

.border-bottom{
    padding-left:0px !important;
    padding-right:0px !important;
}
@media (min-width: 1200px){
.container {
    width: 100%;
}
}

@media (min-width: 992px){
.container {
    width: 100%;
}
}
@media (min-width: 768px){
.container {
    width: 100%;
}
}

Add it to appearance \ customize - additional css.
Hope this helps.