Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress The WordPress Template Hierarchy How WordPress Templates Work Walkthrough of Example Site

Eduardo Daniel Brito Reyes
Eduardo Daniel Brito Reyes
7,032 Points

The Styling of the theme only takes half the screen and fonts are very tiny.

Hi and thanks for any and all support.

I successfully uploaded the Theme without a hitch but when I activated it the styling didn't see quite right. The font on looks too tiny to be right and the content, the text and the widget are all "squished" agaisnt the left side of the screen leaving almost the right half completely in blank. It's not that there the content is squished on top of each other but more like the container for the main text has a very small width.

I have a screenshot for more detail.

Eduardo Daniel Brito Reyes
Eduardo Daniel Brito Reyes
7,032 Points

I fiddled around with inspecting the elements and found that the problem, probably, was caused by units of measurement using "rem". For both the "row" class and the "font-size" the use of rems make them really tiny. I'm still not sure as to what to change them to get the same parameters as I am able to see in the video.

If somebody knows the correct change I would appreciate them.

I'm currently researching rem to figure out why they are making everything tiny. I saw the style sheet but it doesn't seem to contain any info pertaining the rem, that I could find.

4 Answers

Eduardo Daniel Brito Reyes
Eduardo Daniel Brito Reyes
7,032 Points

SOLVED!: It was a plugin called Easy-Foundation Shortcodes that was altering the styling, this plugin was used in the Making a WordPress Theme Course and I leaved it, not knowing it would add CSS styling. I assume that since I am not using Foundation.min.css in this theme, it causes all the styling to bug out.

ALSO: It serves to emphasize the use of the console and inspecting elements in the browser, it told me exactly where the CSS styling was coming from, which I really had no idea since it wasn't inside of the theme folder. Newbies like me, DO NOT, underestimate the power of inspecting in the browser and poking around it.

Solution: Deactivated the Easy Foundation Shortcodes Plugin.

Thanks!

Sebastian Nadeau
seal-mask
.a{fill-rule:evenodd;}techdegree
Sebastian Nadeau
Front End Web Development Techdegree Student 26,545 Points

I had the exact same issue as you did. I am following the Wordpress track and also used the same plugin in the previous course. I'm really glad you figured it out because I was also stumped. I thought it was something relating to the theme styling of bootstrap which I couldn't access directly in the css file. Thank for letting us know where this issue was coming from, I'm sure you helped other students as well with your solution.

Thanks!