Share your websites made with...

User 477332 Photo


Registered User
1 post

Only have the Index page done so far, but figured I'd share anyway - www.gloriaoliver.com

Thanks! :D

Gloria
User 232214 Photo


COO
820 posts

Steve Ravner wrote:

The remaining problem is on three pages - Landscaping, Hardscaping and Before&After - the Facebook and BBB buttons on the bottom worked correctly until I was getting the galleries to work by putting the Visual Lightbox Galleries Head scripts into the Footer, as I learned elsewhere on the forum. Now these two buttons have shifted to the left on the exported website. However, they are identical to all the other pages when seen in RSD - centered, and stay that way for all page widths.

Now I need some expert advice to try to fix this last issue.


For some reason the visual lightbox scripts are inserting code in that row. You can see it by comparing the original page source (right-click > view page source in for example Chrome) and the rendered page (right-click > inspect element in for example Chrome). Sadly we can't control what 3rd party scripts are doing to the RSD code....
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 232214 Photo


COO
820 posts

John Kemp wrote:
Question: On the contact page when the screen is wide the map is to the left of the contact details. On a narrow screen they both switch to span 12 with the map on top. Is there a way to keep the map on the left but make it go below the contact details when narrow? I tried doing it using two copies of the map column and toggling the visibility of them depending on width but that seemed a bit of a fudge. Is it possible to achieve it using a single column?


Yes :cool:

Here's how: In RSD, switch the DOM order of these 2 columns (details on the left, map on the right). Then use the push / pull control on the Layout tab to put them back in the original places (pull the map 1st, it will go behind the details, then push the details). Now they show in the place of the original desktop design.

Before you switch to the full-width (span -12) layout for these columns, set push / pull back to zero for both columns.

If anyone needs some details, we wrote 2 articles on this for Layout Maker:

http://www.coffeecup.com/help/articles/ … out-maker/
http://www.coffeecup.com/help/articles/ … the-stack/

John Kemp wrote:

Overall I'm very very impressed with RSD and amazed at how quickly I managed to get the site up and running.


That's great to hear, thanks! :P
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 431141 Photo


Registered User
78 posts

Bob,

This didn't happen when the "Head" script was placed in the head where it "belongs. Unfortunately, there was a different conflict which didn't let the lightbox work properly.

Then the idea of putting the "Head" script in the footer eliminated the above conflict, and the lightbox worked great - EXCEPT that the head code put in the footer caused the current problem.

It would be great if we could put the scripts where they were designed to go, and still have it all work properly. The head script in the footer is the problem.
=Steve=
User 431141 Photo


Registered User
78 posts

Bob,

Problem Solved!

Thanks for the education using the "inspect element" in Chrome. I saw the naughty link inserted by the Visual Lightbox company back to their website, and manually deleted it from the page html. - no more shift below the gallery.

I'm puzzled by the fact that in the original RLMP website, which is currently online, I inserted the exact same code for the gallery, with the head script in the head, and no other alterations, and everything stayed in place as designed. Using the RLMP import in RSD, all these weird problems arose...???

=Steve=
User 187934 Photo


Senior Advisor
18,078 posts

It's because RSD uses some JQuery to make the magic happen and those scripts are at the bottom of the page. RLM doesn't use these.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 1775874 Photo


Registered User
21 posts

Not sure if this passes muster as awesome, but here it is. My first RSD site. Developed from scratch in the last 2 weeks.

http://claygateflowershow.co.uk

It's not finished and some features (eg downloads) are embargoed by the 'client' for the next week or so.

Some facts and figures:
- Wow slider provides the gallery
- There is Google map (Haven't made this responsive yet)
- There's an embedded online game
- It's all RSD with just some HTML elements to provide some of the visual effects
- It has 30 pages so far and about 10 more to come. So there are really three sites base, part2, part3. Part2 and part3 are in sub folders
- It has Twitter and Facebook feeds / links
- stats are both with Google and Statcounter
- The treasure hunt has already been won - but you can amuse yourself trying it out!!

Personal opinion:
Once your brain is the right the place - and that is not where it needed to be for VSD - then the site builds quickly. For the next one I'll do a lot more planning on paper in terms of folders, where pictures and documents are stored, classes, and basic breakpoints. This is a pro bono site so I had the luxury of be able to experiment!

Others opinion:

"A. B. It's looks amazing and so easy to find your way around on the phone."
Yes it's real, it's on the Facebook page and is much more about RSD than my efforts!

Good work folks, keep it up!

Pat
User 2088758 Photo


Senior Advisor
2,625 posts

Good morning Pat,

You have a nice looking layout. I would suggest one thing though, perhaps the most important thing, is to add some breakpoints and change some of your column spans as you move from right to left on the slider. When you reduce your website down to a small screen everything just squishes up instead of dropping down to a single column.

Break point control is one of the fundamental controls that both RSD and RLMP provide for you and what makes your website truly responsive.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

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


Registered User
21 posts

Steve wrote:
Good morning Pat,

You have a nice looking layout. I would suggest one thing though, perhaps the most important thing, is to add some breakpoints and change some of your column spans as you move from right to left on the slider. When you reduce your website down to a small screen everything just squishes up instead of dropping down to a single column.

Break point control is one of the fundamental controls that both RSD and RLMP provide for you and what makes your website truly responsive.


Hi Steve,
A little concerned they are not showing up for you! There are 4 breakpoints where font sizes change, columns become hidden and column widths change so the items stack above each other rather than being side by side. I'm sure there is more to do, especially with font sizes to keep them readable. Please look at the 'Features' - at the bottom of most pages. On a PC they should be side by side, by the time you are a smart phone and portrait they stack above each other. Also note (I hope!) the right column disappears and the some graphics elements in the heading progressively get hidden as the screen width reduces. Only thing is I haven't got an Apple device (iphone / ipad) so haven't been able to check those!!

Cheers, Pat
User 1775874 Photo


Registered User
21 posts

I've looked at the device stats from Statcounter and think I've identified part of my problem! There are a number of devices with a screen width of 375 and my lowest breakpoint is 370 so I will adjust that up to 376 so the (current) last break kicks in on those devices.

Also from the same stats the smallest screen width that has visited is 320 so I need to push the slider down there and see if anothe breakpoint is needed that would need to be a single column.

All part of the learning curve!

Pat

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.