Docs

[stinos]

Hi!

I’ve been checking some forum entries and tried the solutions there, but some how it’s not working the way I’d like to. I’d like my heading size to be responsive on mobile and maybe also text size.

When I use the shortcode as mentioned here http://demo.theme.co/integrity-1/shortcodes/responsive-text/ it does work if I just replace the text with my text. However the color of the text and all the styling + font changes back (to default?) I believe. How can I use this shortcode in the headings field but also keep the styling as I used in customizer? So that spacing, color and default size remain as is, but just adjust when visiting the site on smaller devices.

When I use the cornerstone responsive text option as mentioned here https://s3.amazonaws.com/community-themeco/app/uploads/2016/04/23064512/Capture215.jpg it doesn’t seem to work on mobile or when resizing. At least for me heading size remains the same. Website is http://www.reginar.photography

How can I fix this?

Looking forward to your reply!

Stijn

[stinos]

O and just to add: I did add classes .h-responsive to all my headings when using the Cornerstone settings option

[Friech]

Hi There,

Thanks for writing in! When applying the class on the element, please do not prefix it with a period [.]. Add only a period when you’re utilising that class as the selector. And I cant replicate the issue regarding spacing and color, please provide us some screenshot.

Cheers!

[stinos]

Hi,

Thanks for your reply. Removing the [.] did the trick when using the cornerstone responsive settings as the selector. However I do need to set a minimum and maximum font size for it to work when resizing. When only filling out the compression, it doesn’t work. But for me that’s not a problem, it works like this.

Still wanted to give you a screentshot though when using the shortcode as mentioned above. Now I used your text, but could have replaced that with mine. The effect is clear I think. The white one is how it should look like, but when using the shortcode everything changes. It looks like even the font changes, I can’t put the color on white either. Again, I got it to work via the other method, but still shouldn’t this work as well? (see printscreen)

I got one more question for now. Could you tell me how to make the section padding responsive? Especially on mobile devices the white spaces are huge. I used px in the cornerstone settings to define the padding of the sections.

Thanks!

[Jade]

Hi there,

There might be some styling in your site that overrides the styling of the heading when the the responsive text feature is added to a block of text or there might be some missing classes that must be added to the responsive element.

Although when I checked the current heading that has the responsive texts feature on your page and they all seem to look the same. Were you able to solve it?

As for the padding of the columns in responsive view, you could try using a custom CSS media query.

It should be something like this:

@media (max-width: 480px) {
     #x-section-xx {
        padding: 20px !important;
    }
}

Hope this helps.

[stinos]

Hello,

Well I only used the settings in the Customizer as you offer them so not sure what would be the issue, but well I did fix the headings now, so it’s fine. It’s a minor thing but now the headings are responsive, when resizing or viewing on mobile, they are not centered any more (as seen from top to bottom). Is there any custom CSS which would take care of that?

Furthermore the only Custom CSS on my site is the following (printscreen) and maybe you could see any issue there with the padding of the sections. I tried your code regarding the responsive padding, but even when changing the px to 0 or something like 2, nothing happens when resizing. It doesn’t seem to respond. It’s not that I can’t run the site because of it, but to be honest on mobile it does look like massive white spaces. I’m actually also planning on making the text sections itself responsive so then the white space would be even bigger.

Thanks again!

[Lely]

Hi Stijn,

Are you referring on the space on top of the text? It is a combination of section 3 70px bottom margin and section 4 padding top 50px. See attached screenshot.

[stinos]

Hi!

Thanks, yes I understand that part, I put the padding there intentionally :). Maybe I didn’t formulate my question correctly.

On mobile phones (and probably on ipads etc too) I would like the white space/padding to be smaller than how I designed it for desktop. If you would check my site on a mobile phone you would see that the white space is actually a bit too big. However on desktop/laptop I do like it to be like this.

Is there any way to customize this just for smaller screen sizes so that the padding becomes responsive in size basically?

[Joao]

Hi There

Try using 4% or 5% of padding instead of 50px for the padding.

px is an absolute measure and 50px will be 50px on all devices, while % will adapt to the screen size.

Let us know how it goes

Joao

[stinos]

Didn’t know about that, exactly what I needed, Worked like a charm, thanks!

Now the whole site is responsive 🙂

[Joao]

Hi There,

Great to hear it.

Let us know if you need further help.

Joao

[stinos]

Hi,

Actually I do have another styling thing. It’s probably related to the setup of The Grid plugin and maybe beyond your scope, but it wold be great if you would have a look at it.

Do you know if how I could adjust the spacing of the ‘1’ ‘2’ ‘3’ etc page nummer buttons from top to bottom? So that there is more padding between the numbers and the photos? Now they are really stuck to the bottom of the photos and it doesn’t look that great. Can’t seem to find this in the setting.

Also is there any chance of putting the arrow buttons which enable you to go left and right through the gallery in the middle between the two gallery bars and then maybe also in a different color? Now they are placed on the photos itself, which I don’t quite understand.

Thanks!

Stijn

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

article.esg-filters.esg-singlefilters {
    padding-top: 22px;
}
article.esg-filters.esg-singlefilters.esg-navbutton-solo-left, article.esg-filters.esg-singlefilters.esg-navbutton-solo-right {
    top: 42%;
}

Hope that helps.

[stinos]

Thank you for the reply but it doesn’t do anything unfortunately.

Is the ‘article.esg’ variable in the code related to the Essential Grid plugin somehow btw?

[Paul R]

Hi,

I can see you have w3 total cache installed.

http://www.inmotionhosting.com/support/edu/wordpress/recommended-wordpress-plugins/clearing-cache-in-wordpress

Please clear your plugin and browser cache then check again.

Thanks

[Author]

Posts