Row of Promos overlapping on tablet

Support
#1

Hello - I’m testing my new site on tablets and mobile. My products are overlapping on my iPad in portrait mode.

I’d love to learn how to think about responsive controls in Pro and Cornerstone. Are we supposed to use the device modes to preview viewports and set parameters to render correctly AND it saves those settings in the CSS files under different media breakpoints? If not, then I’ll have to hand create CSS to solve all these issues?

I had another one where Gravity Forms isn’t behaving responsively.

Thanks!
Rich

#2

Here’s a shot of the ipad.

#3

Also, I need to figure a similar thing out for my mobile footer.

#4

Hello Richard,

You are experiencing such issue because of the way you have coded the promo shortcode. Please have your code updated and use this:

.x-promo {
    width: 265px;
    min-width: 100%;
    max-width: 100%;
    min-height: 265px;
    border-width: 2px;
    border-color: rgba(94, 141, 190, 0.29);
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.05);
    position: relative;
}

.x-promo-image-wrap {
    padding-top: 0px;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto auto;
    position: absolute;
    top: 0;
}

.x-promo-content {
    border: 1px;
    border: #CCCCCC;
    font-size: 80%;
    margin: 0px;
    position: absolute;
    bottom: 0;
}

Please note that custom coding is outside the scope of our support. Issues that might arise from any modifications, the use of custom code and further enhancements should be directed to a third party developer.

Please let us know how it goes.

#5

Okay, Thank you very much. I’ll try this.

#6

Again though, how does responsive code fit into the Cornerstone model. Do changes made in the Device mode with Mobile set get translated into media breakpoints? Thanks!

Rich

#7

Hey Richard,

You have modified the promo element with a custom css. All of this custom css will be applied to all screen sizes and not with each breakpoint. Since this is custom css, the breakpoint should be also added in your custom code like:

.x-promo {
    width: 265px;
    min-width: 100%;
    max-width: 100%;
    min-height: 265px;
    border-width: 2px;
    border-color: rgba(94, 141, 190, 0.29);
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.05);
    position: relative;
}

.x-promo-image-wrap {
    padding-top: 0px;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto auto;
    position: absolute;
    top: 0;
}

.x-promo-content {
    border: 1px;
    border: #CCCCCC;
    font-size: 80%;
    margin: 0px;
    position: absolute;
    bottom: 0;
}

.x-promo {
    width: 265px;
    min-width: 100%;
    max-width: 100%;
    min-height: 265px;
    border-width: 2px;
    border-color: rgba(94, 141, 190, 0.29);
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.05);
    position: relative;
}

.x-promo-image-wrap {
    padding-top: 0px;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto auto;
    position: absolute;
    top: 0;
}

.x-promo-content {
    border: 1px;
    border: #CCCCCC;
    font-size: 80%;
    margin: 0px;
    position: absolute;
    bottom: 0;
}

@media(max-width: 767px){
  .x-promo {
    // your styling modifications here
  }

.x-promo-image-wrap {
    // your styling modifications here
}
  .x-promo-content {
    // your styling modifications here
  }
}

Off course, you will need to add your changes for the smaller screen in the code above.

Please note that custom coding is outside the scope of our support. Issues that might arise from any modifications, the use of custom code and further enhancements should be directed to a third party developer.

Hope this helps.

#8

Thanks for the lead. Yes. I know how to style these types of elements. I just wasn’t sure of Cornestone did some of that for us as we made changed to the properties when the device view was set to Mobile. :slight_smile: Wouldn’t that be great! :slight_smile:
Cheers

#9

You’re welcome, Richard.

#10

Hello - one more quick question. I’d like to move my CSS out to maybe a child theme .css file. I like editing my my own IDE. I’ve already set up a child theme, but haven’t used it much.

I can place all my modification CSS in this file right?

#11

Hey Richard,

Thanks for updating the thread. Yes, you can move the modifications css into the child theme’s style.css. Just take note of the order of the styles being applied to the site.

The following styles were loaded in this order:

  • Theme’s stack stylesheet
  • Child theme’s style.css
  • WordPress Additional CSS (Appearance > Customize > Additional CSS)
  • Theme Option Settings
  • Theme Option’s custom css
  • Cornerstone/Pro Editor’s custom css

Hope this helps.

#12

thanks for that. I was curious all the layers involved. So, it sounds like if things aren’t quite working well it may make sense to have the Pro CSS code contain certain styling since it’s the last to be applied.

#13

Actually, I am having trouble getting my pro-child theme to supply the styles.css file. I have the pro-child theme activated. have for months. I added styles to style.css sheet in the child theme. Any ideas how to tell if the file is being included in the stack?

#14

Hello Richard,

Thanks for updating the thread.

You can view the source code of the website and then search for x-child-css ID. If the website is having x-child-css Id then you can be sure that child CSS file is applied on the website.

Thanks.

#15

Okay, cool. Thanks. Not sure why I didn’t see that the first time I glanced in there. I guess the CSS is being overridden by some other CSS somewhere.

#16

Hi Richard,

Another thing if you want to put your custom CSS on the child theme’s style.css file, you need to pay attention to the CSS Specificity. That means your custom CSS should have more specific selector than the default applied CSS so it can override it.

Cheers!

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.