- This topic has 5 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
I am trying to change the width of element in mobile view, but I can’t figure out which tags to update in the css panel.
I created a custom <p> section that displays correctly on desktop view but I need to adjust the width on mobile view. The width is set to 718px but it needs to be 331px on mobile view.
<p style=”text-align: center; font-size: 20px; padding-top: 40px; background-color: rgba(0, 0, 0, 0.74); padding: 10px; width: 718px;”>WESTWOOD GATEWAY
<span style=”text-align: center; font-size: 16px;”>11111 Santa Monica Blvd.#200
Los Angeles, CA 90025</span></p>Customer Support
Hi Cynthia,
You can try adding class
cu-par-blockto the class list of the Paragraph Block.Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
Then, add this CSS through Appearance > Customize > Additional CSS:
@media (max-width: 768px) { p.cu-par-block { width: 331px !important; } }Hi Fernando – that did not work. Nothing adjusted. 🙁
I checked the Paragraph block, and it seems that the class is still not added.
Can you try adding it first?
I didn’t know what you meant by adding the class “cu-par-block”. I looked up how to create a custom class and called it “black”
then I added it to my <p> code as follows:
<p class=”black” style=”text-align: center; font-size: 20px; padding-top: 40px; background-color: rgba(0, 0, 0, 0.74); padding: 10px; width: 718px;”>WESTWOOD GATEWAY
<span style=”text-align: center; font-size: 16px;”>11111 Santa Monica Blvd.#200
Los Angeles, CA 90025</span></p>then I used the css you provided and adjusted it as follows:
@media (max-width: 768px) {
p.black {
width: 331px !important;
}
}This actually worked.
Are you using a custom HTML or a Paragraph Block?
If it’s a Paragraph Block, you need to add the class as such: Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
If it’s an HTML Block, you’ll need to add it manually in your code.
In any case, we’re glad it’s working now.
- You must be logged in to reply to this topic.
