tag not responsive. Not shrinking

[bhagwad]

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/

[Victor Font]

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?

[bhagwad]

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.

[Victor Font]

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?

[bhagwad]

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.

[bhagwad]

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.

[Victor Font]

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