Working on portfolio.. - Page 2 -...

User 122279 Photo


Senior Advisor
14,535 posts
Online Now

I'll follow up on what both Gunsmoke and Eric have pointed out. Attached is a snippet of the html code from the three pages. Just look at them closely and see that after <body> there is different code on each page, and also after the end of the menu builder code. Check which divs are inside or outside of the others, and make it the same on all pages. I can't tell you which way is correct, because you haven't said which way around you want it to appear.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2924428 Photo


Registered User
1,718 posts

@Eric I had them all set to header and then I changed them to just Coffee-span-12 because there was other codes conflicting.

@Inger i'll go over it again this morning, I fixed a couple open <div> tags and some other stuff yesterday, thanks to Gunsmoke :)
User 2924428 Photo


Registered User
1,718 posts

Wow, I just realized what you guys brought to my attention. I had them set into different row's. That's odd because I thought I labeled everything correctly within RLM. Hmm.. maybe I should go back and have a peek in RLM and see what else I missed.

Problem is now solved, thank you all :)
User 122279 Photo


Senior Advisor
14,535 posts
Online Now

Looks much better the way it is now! :)

I have a couple of suggestions for you, I'll post it later this evening. Have something else to do now (dinner, among other things).
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,535 posts
Online Now

So, I'm back.
Looking at the code of the logo, you have a fixed px width, and then you have the border code in html.
If I were you, I'd move the border code to the css file, and then pop the logo in a div with a % width and a max-width in px, and make the image fill it 100%.

When you narrow the viewport you have the logo cover the menu items.
I think I would have the logo in its own column and then float it so that it appears below the nav bar when on smaller screens. There might be other solutions here, but this is what I can think of.

The text on the about page is sitting smack on the left edge. It needs a margin!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,535 posts
Online Now

One more thing:
When hovering over the menu items Home and About, the wee icons disappear, but not when hovering over Contact. Maybe you should let them all do the same thing.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2924428 Photo


Registered User
1,718 posts

I'm going to start working on this asap! Thanks for the suggestions Inger, I do need to fix that logo , i'm thinking about using different bg for the logo because you can't really make out the graphic.

I'll open MB right now and see if I can get that icon to disappear upon hover.

Do the colors look alright to you Inger? I've looked at it with your suggestions and think they blend.
User 2924428 Photo


Registered User
1,718 posts

Ok got it done..

Can I use @media to adjust the logo's size? Or would that conflict within RLM?
User 122279 Photo


Senior Advisor
14,535 posts
Online Now

You can use @media, but you need to add that back in every time you export the RLM framework. RLM will overwrite everything that has been changed outside the programme.

The colours seem ok to me, but I agree that you'd better use a different colour as the logo background to increase the contrast.

When I wrote this:
...pop the logo in a div with a % width and a max-width in px, and make the image fill it 100%.
I was thinking of a container div with a max-width, like e.g.
<div class="borderlogo"></div> inside which you position the actual logo image.
The css would be something like this:
.borderlogo {width: 25%; max-width: 500px; (plus the other css rules you want) }
where those 25% is the part of the whole available width,
and then
.borderlogo img {width: 100%;}

You can of course use a different %age, 25% is just an example.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2088758 Photo


Senior Advisor
3,105 posts

Also note that you shouldn't be making changes to the css that RLM spits out for that very reason that it over-writes all the time. What I usually do is create a custom.css and store all my css changes there.

I then add this to my header in RLM

<link rel="stylesheet" href="css/custom.css">
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

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.