• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

tag not responsive. Not shrinking

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › tag not responsive. Not shrinking

This topic is: not resolved

Tagged: css, pre, responsive, Width

  • This topic has 6 replies, 2 voices, and was last updated 6 years, 9 months ago by Victor Font.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 23, 2016 at 8:24 am #191894
    bhagwad
    Member

    For some reason, my Genesis child theme doesn't allow

     tags to shrink with the content even with the "overflow: auto" CSS rule.
    
    I display a lot of code on my site and enclose it in 
     tags. I want it to scroll horizontally and take into account screen sizes etc. But you can see in my "Mocha" child theme, that this doesn't happen:
    
    
    View post on imgur.com
    The
     tag is being assigned a fixed width and the rest of my content is being cut off by the screen. I've given a URL as a test page so you can see what happens.
    
    Any help would be appreciated. Thanks in advance!
    http://www.webhostingshed.com/uncategorized/post-with-og_image-text.html/
    August 23, 2016 at 10:08 am #191904
    Victor Font
    Moderator

    The issue you have has nothing to do with the theme. Pre tags are designed not to wrap by default. If you want to fix this, add the following css to your theme's style.css:

    pre {
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    August 23, 2016 at 10:15 am #191907
    bhagwad
    Member

    Thanks Victor. But as I mentioned in my post, I don't WANT them to wrap. I want it to scroll horizontally using the overflow: auto . This works in other themes, but it doesn't work my child theme.

    August 23, 2016 at 2:54 pm #191923
    Victor Font
    Moderator

    It's still CSS related. Google pre tag scroll.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    August 23, 2016 at 3:05 pm #191924
    bhagwad
    Member

    I've done all the research and tried the solutions normally found on the web. I was hoping to learn something new I could use.

    August 23, 2016 at 8:04 pm #191929
    bhagwad
    Member

    Also, this issue only occurs on the Mocha Child Theme of Genesis. All other themes are displaying it as it should. So this is clearly a bug.

    August 24, 2016 at 6:08 pm #191999
    Victor Font
    Moderator

    The Mocha theme is an old XHTML theme. What are the other themes that work, HTML5 or XHTML? If they are XHTML and they work, then I suggest looking through the style.css and see how the pre tag is handled. If they are HTML5 themes, that explains why there's a difference. XHTML and HTML5 are rendered completely differently in browser engines.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble