[Resolved] changing the with of “element” on mobile view

[Cynthia]

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>

[Fernando]

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;
    }
}

[Cynthia]

Hi Fernando – that did not work. Nothing adjusted. 🙁

[Fernando]

I checked the Paragraph block, and it seems that the class is still not added.

Can you try adding it first?

[Cynthia]

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.

[Fernando]

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.

[Author]

Posts