CMS Development

Philysgdy
Top Contributor | Partner
Top Contributor | Partner

Adding media queries to a rich text module

SOLVE

Hi

Can I get some help on this I am creating a link to another landing page using a rich text module. I am working on a clients CMS and I dont have access to customise modules only code. Here is code

<div style="box-sizing: border-box; width: 400px; height: 50px; border: 1px solid #f26924; padding: 15px; position: relative; left: 24%;"><span style="color: #f26924;"><a href="/ilta-2021-connect-with-us" rel="noopener"><span><span style="color: #f26924;">DISCOVER ALL THE WAYS WE CAN CONNECT</span></span></a><a href="/ilta-2021-connect-with-us" rel="noopener" style="color: #f26924;"></a></span></div>

My problem is I need to make this responsive and I know I can't add media queries to inline css. 

 

0 Upvotes
1 Accepted solution
miljkovicmisa
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Adding media queries to a rich text module

SOLVE

Hello @Philysgdy and thanks for writing, you can access the header html field in in the editor and inside it you can write css in the style tags. You can access it from the top tabs like in the screenshot:

 

Untitled.png

 

Next in the bottom you will see the "advanced" tab, when you expand it you will see the header html field, where you can write your css, check the screenshot below:

 

Untitled.png

Please write if you need any further assistance!

I hope my post answers your question, if so mind marking it as a solution.

View solution in original post

0 Upvotes
2 Replies 2
JillStribling
Member

Adding media queries to a rich text module

SOLVE

I'm having the same problem in a template (Barricade) which is no longer in the Hubspot marketlace. I love how the template looks and don't want to change the whole site again. 

 

THE Hubspot SEO recommendations are:

"

Make sure the page width matches the viewport width(452)

Page viewport sets the width of the page for the device where it's being viewed. If the width of the page is different from the width of the viewport, the page may not display correctly on mobile screens.Learn more "
 

 

The HS link solution says: 

https://web.dev/responsive-web-design-basics/#viewport

 

"Set the viewport #

Pages optimized for a variety of devices must include a meta viewport tag in the head of the document. A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling.

To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means that font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom in order to see and interact with the content.

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

Using the meta viewport value width=device-width instructs the page to match the screen's width in device-independent pixels. A device (or density) independent pixel being a representation of a single pixel, which may on a high density screen consist of many physical pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor."

 

Where do I add this to fix the templates? It's mostly in the blogs...

 

What exactly should the additional code snippet say to fix this issue?

 

Thanks,

 

Jill

 

0 Upvotes
miljkovicmisa
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Adding media queries to a rich text module

SOLVE

Hello @Philysgdy and thanks for writing, you can access the header html field in in the editor and inside it you can write css in the style tags. You can access it from the top tabs like in the screenshot:

 

Untitled.png

 

Next in the bottom you will see the "advanced" tab, when you expand it you will see the header html field, where you can write your css, check the screenshot below:

 

Untitled.png

Please write if you need any further assistance!

I hope my post answers your question, if so mind marking it as a solution.

0 Upvotes