Responsive Overlay Box & Content

[guybower1]

hi

I have an overlay box on my homepage and I have been trying to add a Trip Advisor graphic to, but there are a number of media queries to adjust the overlay box for certain size screens and I wondered if I could not just do away them all and have it all done using % and make both the overlay box and content responsive. This would hopefully do away with the media queries altogether.

Something like this.

`

//put the content for the overlay here

`

Does that seem like the way to go to get a responsive overlay box?

Then something along the lines of the following in CSS:
/create overlay wrapper/
#overlay-wrapper{ position: fixed; top: 0; left:0; bottom:0; right: 0; }
/style overlay box/
#overlay-content-box{ width: 60%; height:60%; position: fixed; left: 20%; top: 20%; background-color: rgba(115, 115, 115, .56); overflow-y: scroll; }

Currently I have my overlay box with a max-width and max-height in pixels, but am thinking of changing to this method above if you think it might make it responsive. Am I right in this? I am not after development help, just not sure the overlay will be responsive using this method.

If you could just confirm this will work, that would be great.

I also have an image in the box set as a % width of 70%, so that should respond fine with the content box changes. The image is currently set like this in CSS, which seems to work well with the 70% width in html.

.overlay-box .coe { position: absolute; display: block; bottom: 1.5%; }

What I really need to know is how to make the button responsive, if it is possible possible. I can see how to make the button text responsive, but if the button is set to a particular size, how will that adjust as well, or does the button just resize with the text size? Here is the button html

<a href="http://wordpress-102462-558755.cloudwaysapps.com/food-tours">[x_button id="btn-viewtours" size="global" type="flat" shape="pill" size="regular" style="color:#fff;background-color:#fe5000; padding-bottom: 8px;" href="http://wordpress-102462-558755.cloudwaysapps.com/food-tours" title="Food Tours" target="blank" class="btn-viewtours"]VIEW TOURS NOW[/x_button]</a>

I read your page on responsive text using calc and wanted to check I am understanding it correctly, if that is not beyond the scope of development assistance. The largest font size for the heading in the overlay box is 28px and the smallest would be maybe 14. How is the CSS written for the font-size: calc(14vmin + 28px), if that is the right way to go about using it? Is this the right sort of CSS for to use?

.overlay-heading { margin-top: 0.5%; font-size: calc(14vmin + 28px), font-weight: bold; font-family: Lato, sans-serif; letter-spacing: 1.5px; text-align: center; display: block; color: #fff; }

Is that a good way to go or better to use rem units with different base font sizes in Typography? I assume you still keep h1 h2 h3 etc in CSS though. Is that right?

A question on this if I go the calc route; how then to do letter spacing as responsive as well? Is it just the use of em and a decimal like 0.06 or something, rather than a fixed 1.5px?

I’d dearly like to do away with so many media queries to handle text sizing, so I like the option of using the calc option. I could eliminate so many media queries.

Thanks for your time. Login details in a secure note if you need them

cheers

[thai]

Hi There,

I recommend you to use the responsive text shortcode instead:

http://demo.theme.co/integrity-1/shortcodes/responsive-text/

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

Hope that helps and thank you for understanding.

[guybower1]

Hi Thai

Thanks so much for your reply

I actually don’t wish to use the responsive text method and I actually never asked for any custom coding; merely if the code I supplied would do what I asked; a fairly simple request I would have thought.

The code I asked confirmation about was for the responsive overlay box and content, as well as for the calc method of making text responsive.

The one thing I did ask about was how to do a responsive button, which is hardly custom coding, as you supply x-button as a standard item; I merely want it to be able resize with various screen sizes.

If it is too much to ask for confirmation on my initial questions and how to achieve a responsive button, I’m sorry to have troubled you.

Regards

[christian]

Hey @guybower1,

Regretfully, we are not the right personnel to answer if custom codes would work.

I checked your page though and @thai is correct to recommend the Responsive Text shortcode for your button. Alternatively, you can use Slider Revolution as it has the ability to scale all its contents out of the box.

Regarding using calc or fluid typography in general, you might want to check this article. Here’s also a brief explanation from our lead developer, @kory.

Thank you for understanding.