Responsive (?) Text

Support
#1

Hi there,

Forgive me if this sounds super duper dumb, but uh, I’m having trouble understanding how to implement responsive text. I’ve played around with the editor (starting from Visual Composer all the way to Cornerstone and now the pro editor) enough to work around my lack of coding knowledge, but considering my ambitions (and by god your theme LITERALLY MAKES ME WANT TO BE AMBITIOUS), I feel like I have to ask if there’s any way I can help make the text responsive enough for it to smoothly reflect from the desktop all the way to a smartphone. There has to be a way to make things simpler, is there not?

#2

Hi There,

Thanks for writing in!

Click on cog icon in left panel of cornerstone or content builder.

Then click on the responsive text button!

Then create a responsive template.

Please give a class name and setting as per the screenshot. You can change it as per your convenient.

Then Use the class for your text module you want to make responsive!

Hope this helps!

#3

It did! Hallelujah!!!

This brings me to a lead-up question though. Is there any way I can make Gaps responsive. That would just knock it right out of the park for me if that’s possible.

#4

Hi There,

Setting the size in % instead of px is one path.

Also the gap element has the option to hide it based on screenwidth which can be useful to adjust the responsiveness :slight_smile:

Hope it helps!

#5

How does one do that?

#6

Hi There,

Use % unit


But for Gap element it is better to use the Hide Base on Screen Width option.
That is because a lot of cases you only want the gap on mobile view and hide on desktop, and sometimes the other way around.

Cheers!

#7

Hi,

Oh, so it’s preferred to use classic gaps instead of the newer elements? I use Pro and I’m just trying to figure things out, and the new Gaps can’t always work with the percentage option.

I’m trying as best as I can to use the Hide Based on Screen width option, but the problem is it doesn’t always reflect properly. I need the gap, because my header/navbar has CSS coding that overlaps the first section (which is my cover). But despite the five available options, in different devices, because it doesn’t always uniformly change size, the section crosses fullwidth and loses the charm of a cover. This is my issue.

#8

Hi there,

I still think that the 50% method is the best bet you have on this case. The Gap element does have the % you will need to click on the PX and select the percentage:

Thank you.

#9

The thing is, the percentage thing doesn’t work out in the new gap. Check this out:

It’s ON the percentage thing but it just doesn’t seem to work for some reason.

#10

Also, while we’re at it, is there any way I can force the “Scroll for Full Review” right at the bottom of the section?

Edit: Because if that’s possible, I’m really not going to bother with responsive gaps because its too much work, and I feel so guilty for troubling you guys hides face

#11

Hi there,

Please try the VH unit, 100 is equal to the device height, hence, it should respond to the device where it’s being viewed.

As for the other question, would you mind providing your site’s URL? I’m not sure what’s the bottom of the section, but if your bottom section has an ID, then you can simply use that ID as Scroll for Full Review URL. Example, if footer has bottom-section as ID, then the URL will be #bottom-section

Thanks!

#12

DHi

Since the section I speak of is a header, I just want to force-align it to the bottom of the section so it just looks like it’s right at the bottom of the full-width screen rather than immediately after my second row with the percentage and verdict.

The site URL is:
http://cinemaelite.com/test-2

#13

Hey There,

Setting the minimum height to 100vh should already resolve the issue.

If you need anything else we can help you with, don’t hesitate to open another thread.

#14

Hi,

That’s not what I meant. So if the section is a square with rows stacked on top of each other, I’d like for the row containing the “Scroll for Full Review” headline element to be not just below the above rows (containing the headline, subtitle and scores respectively), but stuck to the bottom of the section. This way the section (now having the min-width locked at 100vh) can now look like a virtual magazine cover page with instructions right at the bottom-most part of the section.

Thanks,
Ankit

#15

Hey @ankit_ojha,

Try adding height: 62vh to your row containing your headline so that it will push the “Scroll for Full Review” row at the bottom of the screen for any screen size. Adjust the value according to your design.

Hope that helps.

#16

I had another question with responsive text types. The templates I save do not necessarily port my responsive text customizations to the other page where I’m using the very template. Is there a way I can make this global?

#17

Hi there,

It’s not possible, plus, the template only contains the content and elements and not the settings. You have to manually re-add the responsive text settings.

Thanks!

#18

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