Structure of Using Responsive Layout...

User 148735 Photo


Registered User
97 posts

I have successfully used Layout Maker to create my home page responsively.

I am now in the process of creating many more pages to the website and I want to make them all responsive.
Here is what I decided to do:
    Put the header and footer in a .php file and refer to it on all pages to create a consistent header.
    Use Responsive Layout Maker to form each page (without header and footer). The layout varies for each page.
    Create a new CSS file (Main.css) for each page and rename it and use it in each page instead of main.css
    This is because when I tried to update CSS into one main.css file, the naming convention gets screwed up from Layout Maker and I have to rename or match format names. So I will have the two other css files generated by Layout Maker on all pages, a css file for the header and footer, and a css file tailored to each page.
    Does this sound like a good technique?

    PS. One of my pages is not responsive even though the responsive code seemed to be in the renamed css file. Does the responsive code vary in any of the other css files (coffee grinder or wireframe)?
User 148735 Photo


Registered User
97 posts

Or does the js folder change according to the responsive code?
User 38401 Photo


Senior Advisor
10,951 posts

You're actually complicating your site more than helping it by sectioning it outside of the layout maker. It's extremely simple to make sure each page has the same layout for header/footer/etc. and to make sure they are all the same once the site is ready to export.

1. Create your first page which includes all items you want on the other pages. Finish that page so it's ready to go and...
2. Duplicate that page by going to the menu at the top and in the Layouts menu selection find Manage Project to open the Project Management window.
3. Choose the page you want to duplicate and press the Duplicate Layout button at the bottom of that window.

You have now created an exact duplicate of that page so you can now edit that page to your hearts content while keeping your shared items the same. If you make sure you give each of those items classes you can actually edit the colors, fonts, etc. on any of the pages and it will update the rest for you as long as they all have the same classes in them.

Keep it simple :)
User 148735 Photo


Registered User
97 posts

Thanks. I was not familiar with the Project Management Window and am trying that now.
First layout ok, except that the CSS for a list item link showed fine in the Layout Maker, but did not take affect in the browser (Safari and Firefox).

I found that if I moved the CSS up to the top of the CSS file it worked fine (after I downloaded the files and edited the CSS file). Not sure what is happening here.
The CSS file is edited automatically by Layout Maker; it appeared the CSS for the list item link was toward the bottom of the file after some of the responsive code. I guess that every time I make a new sheet, it will update the master CSS file and I will have to move that code again?

Does all the regular CSS code have to be before the responsive code?
User 148735 Photo


Registered User
97 posts

I am finding that when I add more pages to my layout, the CSS is showing correctly in Layout Maker, but not in the browser when I publish. It looks like the CSS code is being generated lower on the css list and does not show unless the items are moved up toward the top. ???
User 434929 Photo


Ambassador
938 posts

Rember browser reads your HTML & CSS from top to bottom if its repeated properties and value for same selector in different line it will take effect the one on top.
Guys at coffeecup are awesometacular.
User 148735 Photo


Registered User
97 posts

Here's my problem: I create a layout in Layout Maker. It looks fine.
When I preview it on my browser in layout maker even before I save it looks different: loses CSS files.
In attached images, loses font, loses position on screen, etc.
It then generates HTML and CSS exactly like the browser.

What am I doing wrong??

User 38401 Photo


Senior Advisor
10,951 posts

I'm at a total loss here, what browser are you using? When I look at your screen shots they are identical so it's definitely something in a browser setting, or RLM not formatting for the browser correctly, not sure which. Let us know which browser you're looking through so we can test that, and would actually be better if you could give us a link to the page so we can test it ourselves as well.
User 148735 Photo


Registered User
97 posts

I found out that the problem above was caused by the way I constructed the columns in a row in RLM.

I have tried lots of different ways and none of them display properly. Attached are three files:

1. shows the column layout in RLM.
2. shows the generated code.
3. How it shows in the browser (Safari and Firefox).

I want some text to display in a column next to a image.
I set up 2 spans blank, 4 spans for text, 4 spans for image, and 2 spans blank on a 12 span row.

HELP. I can't figure this out.
User 148735 Photo


Registered User
97 posts

Sorry, forgot to give you a link to a page:

http://shephillsclermont.org/newsletter.html

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.