Struggling...

User 122279 Photo


Senior Advisor
14,447 posts
Online Now

As a means to wrap my brain around RLMP, I'm working on this site: www.praxis-erdogan.de. It was created way before responsive design came about. The index page is no problem, but once clicking on one of the flags, the pages that I'm having problems with come up.

Attached is the desktop view, more or less what it is like now, and the mobile view, what I want to achieve. I'm not able to make the transitions work.
Once there is the nav and the tag line, and secondly the side bars that I want to put in between two paragraphs in the main content. I have tried to work from mobile to desktop, and from desktop to mobile without succeeding. I use display:none, but then I can't get it to display where and when it should display, and vice versa.

There are so many of you in here who have come much farther with this programme than me, so maybe you can give me some ideas, and above all, if what I want is doable or not.
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 603315 Photo


Registered User
938 posts

I know CC will say it's the easiest program in the world to work with :lol: but we know different, it does take some getting used to Inger, but it's really superb. When you say display:none are you doing this in your editor?
User 103173 Photo


VP of Software Development
0 posts

What you need to do there is on that breakpoint, change the SPAN for each column to take up the maximum amount. That will then allow you to stack them on top of one another.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 434929 Photo


Ambassador
938 posts

have a look at end of this video, it maybe helps you or give you an idea

http://www.youtube.com/watch?v=9OQJJ6M2Euw
Guys at coffeecup are awesometacular.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Thanks for your replies! :) I'll try again a bit later today.
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,447 posts
Online Now

http://eikweb.no/responsive-test/

I think I've got it! :):cool:
Some fine tuning still, but on the whole...
One thing I didn't find; is it possible to set the height of an element, such as the two sidebars? You see they are jumping up and down a bit, and I would like to have the grey background covering the whole length. I did it with padding, but as the viewport is squashes, I needed to change that padding quite often.
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,086 posts

Set the min-height setting to the pixel you want it to be Inger. Thats what I did for my green boxes that can be seen here:

http://misterwebguy.com/ResponsiveWebguy2/

That will get rid of that problem.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

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


Senior Advisor
14,447 posts
Online Now

I've done what you suggested, Steve, and in the programme it looks good, but not after being exported and uploaded. Same jumping as before.
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,086 posts

Link?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

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


Senior Advisor
14,447 posts
Online Now

Same as above: http://eikweb.no/responsive-test/
Ha en riktig god dag!
Inger, Norway

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



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.