[rickC22Participant]

Inside a content band I have a photo and text beneath it. The text has been styled to be narrower than the container box, so that it doesn’t exceed far beyond the photo width.

When I add a media query in order to reduce the padding on the text’s left and right sides so that the text is not super condensed on an iPhone screen, nothing changes. I must be doing something basically wrong.

CSS for this box/text:

.botBox {
text-align:center;
border: 4px solid #F5F5F5;
border-radius:8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
background:#FBFBFB;
padding:10px;
}

.botBox p {
font-size: 110%;
font-style: italic;
line-height: 1.5em;
color: #000;
padding: 10px 100px 18px 100px;
margin: 10px auto;
}

What I’ve tried:

@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.botBox p {
padding:2px;
}

I appreciate any help you can offer. Thank you.

[ThaiModerator]

Hi There,
Thanks for writing in!
Try adding following CSS under Appearance > Customize > Custom > CSS:

@media (max-width: 480px){
.botBox p {
padding:2px;
}
}

Hope it helps.

[rickC22Participant]

Thank you. Unfortunately that resulted in the same thing as the code I tried and did not reduce the padding on the sides.

[ThaiModerator]

Hi There,
In this case, would you mind providing us your website URL so we can take a closer look?
Many thanks.

[rickC22Participant]

This reply has been marked as private.

[ChristianModerator]

Hey Rick,

Please add the code below in your Appearance > Customize > Custom > CSS.

@media (max-width: 979px) {
    .headerBoxD {
        padding: 15px !important;
    }
}

The code given serves only as a guide and not the complete solution. Please add your custom classes to that media query to alter their layout in mobile view.

Hope that helps. 🙂

[rickC22Participant]

Sorry to ask for further explanations, but I’m not clear on how you came up with this code that points to the first element on the page. I’m trying to work on the text in the 2 boxes below this content band. Would it be too much to ask for a brief explanation of your post? Thanks.

[ChristopherModerator]

Hi there,

Sorry for confusion, are you referring to this part?

If so please add padding-right: 50px;padding-left: 50px; in style field of content band 3.

Hope it helps.

[rickC22Participant]

Thank you. After some research and testing I was able to get things working as I wished.

I love X, and promote it to my developer friends as often as I can. And the kind and helpful support is a major factor in why I will use your software in all my future WordPress projects. Thanks!

[NicoModerator]

We are very much happy to hear that!

Thank you so much! Have a great day! 🙂

[Author]

Posts