• Resolved abulaphia2000

    (@abulaphia2000)


    I’ve used ChatGPT to write some custom HTML to try to display different content / style content differently on mobile, after having no success with plugins. This code worked just fine, until recently. I edited a random spacer block, to which I had no applicable custom HTML, and I saw that all the custom HTML blocks had stopped being active. All of a sudden, things that were supposed to not appear on mobile were appearing; the text that was supposed to be sized differently on mobile was the desktop size; etc: Aaah!

    So I restored my site to the version before I edited the spacer, and everything went back to normal. But now whenever I edit any trivial, unrelated feature of the site, all of this custom HTML becomes inoperative. For example, I can edit a paragraph that has no custom HTML by adding a new word to the text, and all of this HTML will be inoperative when I view the site. Note that deleting the word doesn’t fix the problem; only undoing the change does. What’s going on?

    Here’s the code that I’ve added:

    <style>
    @media only screen and (max-width: 1090px) {<br />
        .desktop-only {<br />
            display: none !important;<br />
        }<br />
    }<br />
    </style>
    <figure class="wp-block-image size-full is-resized desktop-only"><img src="https://staging2.responsiblereportingonai.org/wp-content/uploads/2023/06/halftonecirclecropped1.png" alt="" class="wp-image-274" width="377" height="377"/></figure>

    And:

    <style>
    #only-mobile {<br />
        display: none;<br />
    }</p>
    <p>@media only screen and (max-width: 1024px) {<br />
        #only-mobile {<br />
            display: block;<br />
        }<br />
    }</p>
    
    
    <style>
    @media only screen and (max-width: 1024px) {<br />
        .small-mobile-text {<br />
            font-size: 2rem !important;<br />
        }<br />
    }<br />
    </style>
    <h2 class="wp-block-heading small-mobile-text has-secondary-color has-text-color" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><strong>About us</strong></h2>

    I’d be super grateful for any help. I’m totally new to this, and really struggling to create a working site.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator t-p

    (@t-p)

    try to display different content / style content differently on mobile

    Mobile compatibility is theme dependent.

    So, I recommend asking at your theme’s dedicated support so its developers and support community can help you with this.

    What are all those ‘<br />’ tags? Did you add them? What happens if you remove them?

    @abulaphia2000 It would probably be best to add that CSS in the Appearance/Customizer/Additional CSS (if you have access to it), and then in a page add classes to the blocks accordingly.

    Issues usually arise if you add things via HTML and then switch to Visual. Every so often, WordPress will strip tags and leave you with broken sections.

    Thread Starter abulaphia2000

    (@abulaphia2000)

    Thanks everyone for your help! @zex2911 was right: I’ve added the CSS without any of the HTML tags into the additional CSS area, and now everything is working!

    @zex2911 I’m super appreciative — do you have a favorite charity I can donate $10 to in gratitude?

    @abulaphia2000 Don’t worry about it, I was happy to help!
    You are welcome to close the ticket if it’s all good!

    • This reply was modified 1 year, 5 months ago by zex2911. Reason: Ticket closure edit
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Any trivial changes to a page break my custom html’ is closed to new replies.