Responsive Themes

User 2287960 Photo


Ambassador
580 posts

I bought 2 responsive themes to see how they work - Be happy and Elegance. I am not well up on how responsive is achieved or works.

My question is are these themes fully responsive, I've tested them in a bowser and changed the size of the browser window. They appear to click in at certain sizes so I am presuming 960px, 768px and 480px. Other responsive sites I have seen appear to resize as you change the size of the window so are on a sliding scale.

When viewed in Ext Preview they are not responsive when you change the size of the window.

Keith
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Is this in the head of the page?
<meta name="viewport" content="width=device-width">
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2287960 Photo


Ambassador
580 posts

<meta name="viewport" content="width=device-width" /> - Yes

Keith
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Must be they have the css setup for the different steps.
Here's for an image setup.

<picture alt="description of image">

<!-- low-res, default -->
<source src="small.jpg">

<!-- med-res -->
<source src="medium.jpg" media="(min-width: 400px)">

<!-- high-res -->
<source src="large.jpg" media="(min-width: 800px)">

<!-- Fallback content -->
<img src="small.jpg" alt="description of image">

</picture>

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 298877 Photo


Ambassador
292 posts

The @media queries in the styles usually relate to a max screen size.

So, in your css you should see the @media query for each screen size step.

For example: "@media screen and (max-width: 768px)" would be employed on screen sizes below 768 pixels. Then "@media screen and (max-width: 480px)" introduces new rules for screens smaller than 480 pixels etc. These @media queries, and their rules, over-ride the default styles they refer to. You'll see these rules at the bottom of the css file in your responsive theme.

A really cool tool that I use for testing how all this renders and seeing how your changes impact the layout etc. is available here: http://responsive.victorcoulon.fr/

It's a nifty browser plugin which lets you look at your site (or any site) in your browser but as though you were using a phone, tablet etc. ;)
User 2287960 Photo


Ambassador
580 posts

Thanks Dave

When using the plugin they display well at those set sizes.

From CSS, I do not understand:


#camp:hover {
background-image: url('../../../../../Make responsive/CoffeeCup_HTML_Editor-Be_Happy/Be Happy/html/images/camp_btn_hov.png');
}


The image does nor exist, but the code would need changing to make it work?

Keith

User 298877 Photo


Ambassador
292 posts

Hi again Keith,

This seems to relate to a button which should be under the Shop On-Line button on the services page. The image is not included in the theme pack, so you can either delete this #camp reference in the css and the associated id in the markup on the services page, or you can alter it as you wish :)

Dave
User 298877 Photo


Ambassador
292 posts

Hi Keith,

This theme should be updated by Coffeecup soon, so keep an eye on your purchased themes download page here:
https://www.coffeecup.com/help/myproducts/themes/

Dave :)
User 103173 Photo


VP of Software Development
0 posts

Thank you so much David for addressing that for us. You are a ROCK STAR!!

This new version is now online.
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 2287960 Photo


Ambassador
580 posts

Dave

Thanks, starting to make sense now.

Scott

Don't you sleep it is 9am in UK. Thank s for your input.

Keith

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.