Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Content width on new install #242

Closed
VacantFuture opened this issue Feb 24, 2015 · 13 comments
Closed

Content width on new install #242

VacantFuture opened this issue Feb 24, 2015 · 13 comments

Comments

@VacantFuture
Copy link

I just setup FoundationPress on conveyor.makegroup.com. The layout is different from the http://foundationpress.olefredrik.com/kitchen-sink/ site. The content is centered on the screen and the alert boxes have a width of 970px on olefredrik.com. My install, the content is left aligned and the alert boxes have a width of 607px.

Same thing happens when I open Google Dev Tools and select tablets (Nexus 10, Tab 7,8,10.1 or iPad 3/4). For mobile it is applying .small-12 and on the desktop is shows .large-12.
@olefredrik
Copy link
Owner

I'm not sure I understand your question. Can you please specify and possibly supply a few screenshots where you point out the errors you are experiencing on a new install?

@VacantFuture
Copy link
Author

I hope this helps. Kitchen sink page on my install, the div with role of main is left aligned, with a width of 625px. Everything looks "squished". On your demo site, that save div has a width of 1000px and is centered on the screen.
makengroup-kitchensink
olefredick-kitchensink

@olefredrik
Copy link
Owner

I just did a fresh install, and the Kitchen Sink template looks just fine. I suspect that this error is caused by a setting in your browser or Google Dev Tools? The row class has a max-width of 62.5rem and a width of 100%. On my 13" macbook the kitchen sink renders at 970px width. This will adapt to the viewport. Can you test in a different browser (Firefox, IE, Opera or whatever) and check if the error persists? After doing a clean install, make sure you do a grunt build

@FlatspinZA
Copy link

From what I can see, somehow you are not referencing the foundation.css file, which is more than likely the problem.

@Endlyss
Copy link

Endlyss commented Feb 24, 2015

@FlatspinZA
Yes, it's there. He's got it directly below the title, line 8.

@FlatspinZA
Copy link

Clearly, I am missing something:

<head>
<TITLE>Makegroup</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script src="/js/makegroup.js" type="text/javascript"></script>
<style type="text/css">
A:link    { text-decoration:none; color=#BCE49A; }
A:visited { text-decoration:none; color=#BCE49A; }
A:hover   { text-decoration:none; color=#888888;  }
A:hover   { text-decoration:none;  color=#9900FF;  }
p,br,body,table,td,select,input,form,textarea,option { font-family:굴림,굴림체; font-size:8pt; }
</style>
</head>

@VacantFuture
Copy link
Author

It is pointing to the wrong directory for the foundation.css

@Endlyss
Copy link

Endlyss commented Feb 24, 2015

@FlatspinZA

Apologies...between me posting "yes, it's there" and your "clearly I am missing something", something was reverted on his setup, because I am 100% sure that I saw it there, haha. Was one of the first things that looked for. I should have pasted a snippet like you did.

@VacantFuture
Copy link
Author

Yes. I uninstalled FoundationPress to start over. Thanks for your help.

@VacantFuture
Copy link
Author

Sorted out some server issues and did a fresh install. Unfortunately that did not fix the issue.

This is the link to the style sheet, . If you paste that into an address bar it comes up but the theme/site is not loading it? In Google Developer tool under Network, foundation.css has http 304 code. So the document is not returned to the browser?

@Aetles
Copy link
Contributor

Aetles commented Feb 24, 2015

You're loading both Bootstrap and Foundation, don't think it's a good idea to use both frameworks at the same time. The font-size: 10px; on html causes the entire page to be rendered very tiny (since Foundation uses this as base for the grid).

@VacantFuture
Copy link
Author

Biscuits and gravy :) Everything is working correct now.
Disabled a bootstrap shortcodes plugin i had installed some time back and forgotten about. That restored things to the proper width but it was still pushing all content to the left . A plugin that is underdevelopment and I had tested on this site earlier was pushing everything to the left. I disabled it and everything is working fine now. Thank you.

@FlatspinZA
Copy link

Just one other thing, even though this is closed:

You'd be better off using Foundation's grid than using a table - your layout would then adjust correctly according to the device.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@Aetles @olefredrik @VacantFuture @Endlyss @FlatspinZA