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
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
Is this in the head of the page?
<meta name="viewport" content="width=device-width">
<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
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
<meta name="viewport" content="width=device-width" /> - Yes
Keith
Keith
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>
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
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
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.
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.
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
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
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
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
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
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
Thank you so much David for addressing that for us. You are a ROCK STAR!!
This new version is now online.
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.
Dave
Thanks, starting to make sense now.
Scott
Don't you sleep it is 9am in UK. Thank s for your input.
Keith
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.