Archived topic
changing the with of "element" on mobile view
5 replies · Started by Cynthia on January 8, 2023
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>
Hi Cynthia,
You can try adding class cu-par-block to 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.