Redesign in Progress - Page 13 - Post...

Feb 20th, 2014 at 02:47 PM
User 2088758 Photo

Steve
Senior Advisor
3,098 posts

Adam East wrote:
Steve wrote:
Ok fixed up the center green strip. I manually coded some css corners and shadows. Does that look better?


Try adding a default class of framed to some of your images... :) It is a prebuilt class in Coffeegrinder.


I'm looking though the coffeegrinder css, can you give me a good example to try.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Feb 20th, 2014 at 03:28 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

Steve wrote:
Adam East wrote:
Steve wrote:
Ok fixed up the center green strip. I manually coded some css corners and shadows. Does that look better?


Try adding a default class of framed to some of your images... :) It is a prebuilt class in Coffeegrinder.


I'm looking though the coffeegrinder css, can you give me a good example to try.


<img class="framed" src="yourimgurl">
Feb 20th, 2014 at 04:26 PM
User 2088758 Photo

Steve
Senior Advisor
3,098 posts

Very Cool. I see there are two other classes that can be used too.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Feb 20th, 2014 at 05:05 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

Steve wrote:
Very Cool. I see there are two other classes that can be used too.


Do not forget about the icons! HUNDREDS of them...

Feb 20th, 2014 at 08:20 PM
User 2088758 Photo

Steve
Senior Advisor
3,098 posts

Ok I think I am done the home page. But I do have one question...

I am trying to make the $200 image at the top of my page disappear from the website when i reach viewport 486.

So the image class name is "image-4-3 image-2" so you think when I add that to the main.css it should work. Am i missing something here?

@media screen and (max-width: 486px) {

img.image-4-3 image-2 {
display:none;
}
img.image-4-3.image-1 {
display:none;
}
img.image-4-3.image-1 {
display:inline;
}
span.text-element.text-1 {
font-size:20px;
}
}
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Feb 20th, 2014 at 08:42 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

Steve wrote:
Ok I think I am done the home page. But I do have one question...

I am trying to make the $200 image at the top of my page disappear from the website when i reach viewport 486.

So the image class name is "image-4-3 image-2" so you think when I add that to the main.css it should work. Am i missing something here?

@media screen and (max-width: 486px) {

img.image-4-3 image-2 {
display:none;
}
img.image-4-3.image-1 {
display:none;
}
img.image-4-3.image-1 {
display:inline;
}
span.text-element.text-1 {
font-size:20px;
}
}


Yes, that will work. However you should apply this to the column the image is in rather than the image itself. Because any formatting for the column such as padding and margin will still be displayed.

To be honest, you really should do this in RLM and reexport.

Also, a tip... When creating the website you should create a custom.css file to work out of until you are completely finished with RLM. Then just copy the custom.css to the main.css. That way if you make changes to the layout and reexport you do not lose the changes you made. :)
Feb 20th, 2014 at 08:54 PM
User 2088758 Photo

Steve
Senior Advisor
3,098 posts

I would love to but then i have to re-add all my content again. Thats why I choose to edit the code instead of having to redo everything again. That code is not working because the image does not disappear when its at that viewport.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Feb 20th, 2014 at 09:48 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

Readding content is nothing compared to not messing up and forgetting to put a . somewhere. Which is what you forgot to do... :P

Your code is

img.image-4-3 image-2 {

display:none;
}


It should be:

img.image-4-3.image-2 {
display:none;
}


You could even shorten it to

.image-2 {
display:none;
}

Feb 20th, 2014 at 09:55 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

I would also recommend removing the Slider at around 480px as most cell phones are going to be running on a data plan with 4g access and the slide show will slow down the load time and increase the download size of your website for mobile users. Not everyone has an unlimited plan. :P
Feb 20th, 2014 at 10:02 PM
User 2088758 Photo

Steve
Senior Advisor
3,098 posts

Thanks alot Adam that did the trick.

Is there any documentation on best practices when using the RLM. I would love to know the proper way to do it.

I have spent alot of time customizing the css and content of this page. I absolutely dread having to go back into my RLM and doing any changes at all!

I'm fairly new to view ports is there an easy way to change it outside of the program?
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.