Site logo

Archived topic

changing the with of "element" on mobile view

5 replies · Started by Cynthia on January 8, 2023

Viewing posts 1–6 of 6

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 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.

This archived topic is closed to new replies.