-
Posts
-
Is there an easy solution within Enfold for making text size responsive? I am using a 5 column grid with a slider in the 4 right hand columns and our company initial pitch in the left column. I’m using 75% container width and designing for a 1366×678 laptop screen. The type lines up even with the bottom of the slide for that size, but shrinks hugely when viewed on a 1920×1024 desk screen. The same sizing problem affects my whole site, but it’s most noticeable here on the home page.
Is there a simple solution that will make the text responsive across my whole site? I’m not a code expert and I’m trying to find something that will work for the whole site for present and future development.
Help! Thanks!
Dave
Hey dkrausJFA,
Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your text block element and give it a custom CSS class and then add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
@media only screen and (min-width: 1367px) { .your-custom-class p { font-size: 22px; }}Best regards,
YigitxThanks so much for the response! Forgive me if I’m really nervous about messing with the functions.php file. I know very little about code.
To activate the custom css class field, do I just add this line of text to the bottom of all the other text in this php file? Or does it need to be plugged in at some specific place?
Also, would I then need to add a shortcode to every text layout element in order to make that particular element responsive? Or would this procedure you are describing make all text on the site responsive across various screen resolutions?
Thanks . . . Dave
Hi!
To activate the custom css class field, do I just add this line of text to the bottom of all the other text in this php file? Or does it need to be plugged in at some specific place?
Yes, you can add it at the very bottom of the functions.php file. However, the standard practice is to create a child theme and then add the modification there. http://kriesi.at/documentation/enfold/using-a-child-theme/
Which text are you trying to modify? Please provide a screenshot or the actual url of the page.
Cheers!
IsmaelThanks for your response, Ismael . . . I am trying to modify my entire site so that the text will be responsive. I have designed with a target screen resolution of 1366 x768, as seems to be conventional, and that looks fine on laptops. But on 1920×1024 desktop screens the images re-size, but the text does not and all shrinks. I would like everything consistent and responsive.
The current developmental home page URL is included in this post’s private content.
The most obvious expression of the problem is the main text at left, which ends even with the bottom of the slider on 1366×768, but shrinks a lot at 1920×1024.
Hey!
It doesn’t resize automatically because the font size property is set as an inline style. Edit the text block then set the Font Size to default.
Regards,
IsmaelHi Ismael . . . At the URL I provided above, I have cleared all styles in the main text block that begins “Jaeger and Flynn Associates is committed . . . ” and then set the font size at default, as you suggest. But when I preview the page, the problem persists and the text is still not responsive. At 1366×678 the type is the same depth as the slider at right, but at 1920×1024 it still shrinks so that it is only about half the depth of the slider.
Also, when I look further at Yigit’s suggestions above, I find that the code he includes above already seems to be in my functions.php file:
/*
* add option to edit elements via css class
*/
// add_theme_support(‘avia_template_builder_custom_css’);I did not add this code . . . Did Yigit? Also I find this mystifying, since I see no extra Custom CSS class option in the pop-up menu for my text element.
Dave
Hi,
instead of this:
/* * add option to edit elements via css class */ // add_theme_support(‘avia_template_builder_custom_css’);use this in your functions.php:
/* * add option to edit elements via css class */ add_theme_support(‘avia_template_builder_custom_css’);Best regards,
AndyGood morning . . . I hate to dredge this thread back up, but I was assigned to some other projects and am only now getting back to this one. I am not having any luck with any of the advice given above.
I’ve tried adding the specified code to the “Theme Functions (functions.php)” file via the editor module as Andy suggested, with no resulting change in the responsiveness of the text box, so I removed the code from there.
I also tried adding it to the “functions-enfold.php” file via the editor module,again with no resulting change in the responsiveness of the text box. So I removed it from there, also.
The font size in the text box is set to default, as Ismael suggests above, also with no change.
Responsive design IS turned on in the Enfold preferences.
As near as I can tell, none of the text boxes on my site are responsive, but it’s the main box at the top left of my home page that is causing the most problems. Our CEO wants a solution to this problem and I am at wit’s end! I need a solution that doesn’t involve tons of coding experience because I don’t have that. I need to implement responsive sized text boxes across my whole site so that the layout will look the same at different resolutions, whether large desktop screen or laptop resolution.
The link to the relevant page is in the private section. I can supply login page link, username, and password if needed.
Thank you so much for ANY help I can get on this! :-)
DaveHi,
a screenshot (imgur.com, dropbox) showing the elements in question would have helped a lot in understanding your needs. However, I guess you’re talking about this element:
@media only screen and (max-width: 767px) { .flex_column.av_one_third.av-animated-generic.fade-in.flex_column_table_cell.av-equal-height-column { padding: 10px 15px 36px 15px !important; }}put this code into Quick CSS field and adjust if needed.
Best regards,
AndyHi Andy . . . Thanks for getting back to me on this!
In a nutshell, the problem is that the page elements themselves seem to be responsive, but the text size within the box is not.The text boxes themselves, within layout elements of a set width–1 col., 2 col, etc.–remain at that width when screen size or resolution changes.
But the text itself does not readjust in size to maintain the depth of the text box, and that is what is screwing up my site. If you set sizes on the desktop screen, when others look at it on their laptop at a lower resolution, the text is huge and pushes other element down and off the bottom of the screen. Design for proper proportions on the desktop screen, and when viewed on the desktop screen the elements scrunch together to the point where where the headline below the slider actually goes partially behind the slider.
I have included screenshots links in Dropbox in the private info area so you can see the problem. Thank you so much for your help!
Dave
Hi,
you can change this text part with this code:
@media only screen and (max-width: 767px) { .avia_textblock ul { font-size: 10px; }}Don’t forget to adjust media queries as needed, for different screen sizes. For more information check out: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Best regards,
Andy
- You must be logged in to reply to this topic.