Styling not applied to shortcode in mobile version (PRO)

[franticape]

Hi guys,

I have a very weird issue going on. i added a shortcode into a column and style it locally in that page.
For some reason the changes only apply to every viewport bigger than 767px, even though i do not have any media query in place.

i have to say it’s the first time it has happened to me, although i have to admit that i rarely use the accordion shortcode these days (which is the one giving me trouble, obviously)
Coul you please take a look?

Thanks!

[basanta]

Hi There,

Can you please post a screenshot of the section where you have the short-code. I am not abale to figure out the section.

Thanks

[franticape]

here it is: http://prntscr.com/jml9tw

check the pricing table. it looks fine on desktop, the problem is on mobile (as soon as the design becomes inline)

[Prasant]

Helo @elpanda13,

Thanks for updating the thread.

I can confirm the issue on my end. On desktop changes are working fine but they are not getting reflected on mobile devices. Upon further investigating the issue I see that the media queries codes you have added is not targeting the mobile devices. I see that code is being added in page css editor. Open the page in content builder and click on CSS to see the code. You need to adjust the view port side to make the necessary changes. Because code is not geared towards smaller viewports, those elements are pulling Theme CSS. A sample code for mobile devices in you case would look like:

@media only screen and (max-width: 600px) {
    .pt-acc.gray .x-accordion-heading .x-accordion-toggle.collapsed, .pt-acc.gray .x-accordion-heading .x-accordion-toggle, .pt-acc.gray .x-accordion-inner {
    color: #3d3f43;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    font-family: "Anton",sans-serif;
    background-color: #d7d7d5;
}
}

I am also sharing few relevant tutorials that will help you to get started with media queries.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[franticape]

Uhm… That is the thing (and I specifically mentioned it before)

“For some reason the changes only apply to every viewport bigger than 767px, even though i do not have any media query in place.”

I do not have any media query on that page, and if there is then I can assure you I didn’t write it! (That was, of course, the first thing I looked for)

[ruenel]

Hello There,

I have inspected the page and you have added a custom css right in Pro Editors’s custom css section.

In case, you are wondering why you are having this issue, I have a hunch that you have unclosed the @media block prior to your code. So I guess, you need to update this @media block and use this:

@media(min-width:768px){
  .gf_right_half{
    padding-left:1.5em !important;
  }
  .gf_left_half{
    padding-right:2em !important;
  }
}

Hope this helps. Please let us know how it goes.

[franticape]

Huh, weird, that media query shouldn’t even be there (in fact i looked at the code at least 20 times and didn’t even SEE it), but ok, yeah, the problem was a closing bracket!

[christopher]

Glad that you have managed to fix the issue