Docs

[quint]

Hello,

Could you help me get the settings correct so that what is seen on my local machine matches what is seen on my live site?

I have uploaded screenshots showing the page as viewed from an iPhone 5s, 6s, and 6s Plus on my local machine. These are correct (scaling works per appropriate device).

I have also uploaded screenshots from the live site for the same devices. I believe the reason for cutting off the page and adding scroll bars are due to how the Ethos page template has been set up.

Can you help me match the live site to my local site?

[quint]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! It sounds like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[quint]

Hello,

Thank you for responding. With all due respect, I disagree.

The content has to expand as it normally would based on the device dimensions (as I clearly showed in a non-styled web page per the local screenshots). The Ethos theme is calculating and applying its normal margins. I do not want any css regarding margins nor padding applied on this page.

As you can see, I’m using the following template: No Container| No Header, No Footer

Please show me or tell me how, with regard to the Ethos theme and this template, to prevent whatever the theme is doing to apply its margins and padding for this template. Again, I don’t want any styling applied to this template.

Hopefully, that’s clear. If not, let me know and I’ll try again.

Thank you!

Quint

P.S. Hopefully the following makes sense, my content automatically scales to the device height/width. The Ethos styling is applying a mandatory height which I had to force in the Global CSS module in Cornerstone to 768px. I don’t want to manually set that height. If I remove the height styling, X theme applies a height of 0px. It needs to be whatever the device height is.

P.S.S. I also tried a media query for an iPhone 6 Plus in portrait for my page using Cornerstone, Custom CSS:

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { /* STYLES GO HERE */ 

 #see-panel {
   height: 736px;
 }
}

That code didn’t work. The height was still 0 px.

[Rad]

Hi there,

It’s not Blank – No Container| No Header, No Footer what you selected. It’s Blank – Container| No Header, No Footer. Your local has correct template (No Container).

I went ahead and changed it but it goes blank. Would you mind uploading what’s on your local?

Thanks!

[quint]

Hello Rad,

Thanks for your help. “Local” is not a local version of the X theme. It’s not a theme at all, just a basic HTML page with no styling. I cannot upload that to you. By the way, Blank – Container| No Header, No Footer is correct as I had it.

Let’s make this simple:

Using the Safari Web Inspector:

I can force the styling for:

iPhone 6s Plus (414 x 736) by manually adding/editing

div.x-container.max.width.main {
  width: 414px !important;
  height: 736px !important;
}

.x-content-sidebar-active .x-container.main:before, .x-sidebar-content-active .x-container.main:before {
  left: 0;
}

.x-content-sidebar-active .x-container.main:before {
  right: 0;
}

.x-container.main:before {
  top: 0px;
  bottom: 0px;
}

div.offset.cf {
  height: 100%;
}

div.x-main.full {
  height: 100%;  
}

article#post-4.post-4.page.type-page.status-publish.hentry.pmpro-level-required.pmpro-level-5.pmpro-has-access.no-post-thumbnail {
  height: 100%; 
}

div.entry-wrap.entry-content {
  height: 100%;
}

With these changes in the Inspector, the document has been scaled properly.

1. Now that I’ve laid out the code that works in the Inspector,
can you go into my theme and make those changes for iPhone 6s Plus (414 x 736)?
2. Can you tell me where in the Dashboard/Cornerstone you made those changes?
3. Then can tell me briefly tell me what to do to recreate the same for the iPhone 6s (375 x 667), and the iPhone 5s (320 x 568)?

I believe what’s required are media queries but what I’ve tried does not work.

Thank you!

[Rad]

Hi there,

In that case, you preferred to have spacing? It’s the container that adds space.

1. Like this?

@media ( max-width: 414px ) {
div.x-container.max.width.main {
  width: 414px !important;
  height: 736px !important;
}
}

or this,

@media ( max-width: 414px ) {

div.x-container.max.width.main {
  width: 414px !important;
  height: 736px !important;
}

.x-content-sidebar-active .x-container.main:before, .x-sidebar-content-active .x-container.main:before {
  left: 0;
}

.x-content-sidebar-active .x-container.main:before {
  right: 0;
}

.x-container.main:before {
  top: 0px;
  bottom: 0px;
}

div.offset.cf {
  height: 100%;
}

div.x-main.full {
  height: 100%;  
}

article#post-4.post-4.page.type-page.status-publish.hentry.pmpro-level-required.pmpro-level-5.pmpro-has-access.no-post-thumbnail {
  height: 100%; 
}

div.entry-wrap.entry-content {
  height: 100%;
}

}

2. Are you referring with above CSS or the page templates? If it’s about the CSS, you can then add it on your customizer’s custom CSS, or cornerstone’s custom CSS under settings section.

If it’s about the template, then it’s available on both cornerstone setting section and page attribute section (editor mode).

3. You can duplicate the CSS, and change their value, example,

@media ( max-width: 414px ) {
div.x-container.max.width.main {
  width: 414px !important;
  height: 736px !important;
}
}
@media ( max-width: 357px ) {
div.x-container.max.width.main {
  width: 414px !important;
  height: 736px !important;
}
}
@media ( max-width: 320px ) {
div.x-container.max.width.main {
  width: 414px !important;
  height: 736px !important;
}
}

This is just a sample, you can change the value whenever you like, or even add more CSS within each @media block.

Hope this helps.

[quint]

Hello Rad,

Thanks for your answer. I have been partially successful.

I have added the following code to the Customizer CSS:

@media ( max-width: 414px ) {
div.x-container.max.width.main {
  width: 414px !important;
  height: 736px !important;
}
.x-content-sidebar-active .x-container.main:before, 
.x-sidebar-content-active .x-container.main:before {
  left: 0;
}

.x-content-sidebar-active .x-container.main:before {
  right: 0;
}

.x-container.main:before {
  top: 0px;
  bottom: 0px;
}

div.offset.cf {
  height: 100%;
}

.x-container > .offset {
    margin: 0px auto !important; 
  }  
  
div.x-main.full {
  height: 100%;  
}

article#post-4.post-4.page.type-page.status-publish.hentry.pmpro-level-required.pmpro-level-5.pmpro-has-access.no-post-thumbnail {
  height: 100%; 
}

div.entry-wrap.entry-content {
  height: 100%;
}
  
div#see-panel {
    height: 100%;
  }  
  
}

@media ( max-width: 375px ) {
div.x-container.max.width.main {
  width: 375px !important;
  height: 667px !important;
}

.x-content-sidebar-active .x-container.main:before, 
.x-sidebar-content-active .x-container.main:before {
  left: 0;
}

.x-content-sidebar-active .x-container.main:before {
  right: 0;
}

.x-container.main:before {
  top: 0px;
  bottom: 0px;
}

div.offset.cf {
  height: 100%;
}

.x-container > .offset {
    margin: 0px auto !important;
}  
  
div.x-main.full {
  height: 100%;  
}

article#post-4.post-4.page.type-page.status-publish.hentry.pmpro-level-required.pmpro-level-5.pmpro-has-access.no-post-thumbnail {
  height: 100%; 
}

div.entry-wrap.entry-content {
  height: 100%;
}  

  div#see-panel {
    height: 100%;
  }  
  
}
@media ( max-width: 320px ) {
div.x-container.max.width.main {
  width: 320px !important;
  height: 568px !important;
}

.x-content-sidebar-active .x-container.main:before, 
.x-sidebar-content-active .x-container.main:before {
  left: 0;
}

.x-content-sidebar-active .x-container.main:before {
  right: 0;
}

.x-container.main:before {
  top: 0px;
  bottom: 0px;
}

div.offset.cf {
  height: 100%;
}

  .x-container > .offset{
    margin: 0px auto !important;
  }  
  
div.x-main.full {
  height: 100%;  
}

article#post-4.post-4.page.type-page.status-publish.hentry.pmpro-level-required.pmpro-level-5.pmpro-has-access.no-post-thumbnail {
  height: 100%; 
}

div.entry-wrap.entry-content {
  height: 100%;
}  
  
  div#see-panel {
    height: 100%;
  }  
  
}

When viewed in the Safari browser in the Responsive Design Mode for the iPhone 6s Plus, iPhone 6s, iPhone 5s, the styling is properly applied. I have included a screenshot showing what the inspector shows when set for the iPhone 6s Plus. Great!

Unfortunately, when viewed on the actual device, my iPhone 6s Plus, the styling is not applied. It’s as though the styling is ignored. I have included a screenshot of the inspector.

It’s close. Do you have a solution for this?

[quint]

Hello Rad,

I think I’ve got it using:

@media screen and ( max-device-width: 414px )

If that code can be made better, let me know.

It doesn’t show up properly on the Safari desktop browser but it is correct in Chrome. I have no idea why.

Thanks for your help!

[Rad]

Hi there,

You can try something like this to improve it just to make it sure.

@media screen and ( max-device-width: 414px ) and ( max-width: 414px )

Would you mind providing a screenshot of what you see on safari? It looks okay on my end the same as chrome.

Thanks!

[Author]

Posts