Dynamic Content Box

7 posts from 3 voices

• Started 11 months ago by Bryan
• Latest reply from Devin
• This topic is closed
• This topic is resolved

Tags:

No tags yet.

1. 

   Bryan
   Member

   I have seen many posts requesting on how to resize the content box in the flashlight theme, and I know that I can set it to a specific size by manipulating the ".content .box " fields in the custom.css file. My question is, how do I set this to a variable, rather than a specific value? In other words, I'd like the content to resize based on the user's window size. I have tried using the "100%" variable instead of "430px", but the content sizing seems to go deeper than just the ".content .box" fields because this change did do anything. Is this possible? if so, is there an easy variable string I could add to the custom.css file?

   Thanks!

   Posted 11 months ago #
2. 

   Bryan
   Member

   I just noticed that the "Flexible Grid Gallery" does exactly what I am looking for all the other pages to do. So I suppose I just need to know how to properly reuse that code for the ".content .box"

   Posted 11 months ago #
3. 

   Ismael
   Moderator

   Hi,

   You need to use media queries to target specific screen sizes like mobile devices and stuff. This link might help you.

   http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

   This code will target screen with less than 480px resolution (iPhone, Samsung Galaxy etc)

   @media screen and (max-width: 480px) {
   
   	.content .box {
           }
   }

   Unfortunately, Flashlight is not a responsive theme so you need a major modification in order to make it responsive.

   Regards,
   Ismael

   Posted 11 months ago #
4. 

   Bryan
   Member

   Forgive me if I'm wrong, but I believe I found how to make it a responsive theme by adding the following to the cutsom.css:

   .content{
   width:100%;
   }

   .content .box{
   width:auto;
   }

   I may be missing something else important, but this "seems" to resolve the width issue, and I have tested it on IE, Chrome, and an Iphone. However, I am not using this as a commerce site with Woo, so I don't know the impact it may have on that. Please let me know if you think this has any severe impact, but for the moment, I'll run it with this code in place.

   Thanks,
   Bryan

   Posted 11 months ago #
5. 

   Devin
   Moderator

   Hey Bryan,

   That sounds correct and the only thing I can think of that might cause issues is with Attached Images like: http://www.kriesi.at/themes/flashlight/2011/09/28/this-is-a-test/

   Since the effect is for the image information to appear to the right of the content. You could target this specific type of page and undo your css above if you wanted to or just not use the gallery type.

   You might also have issues with single posts since the meta data and date are off to the edge.

   Regards,

   Devin

   Posted 11 months ago #
6. 

   Bryan
   Member

   Ahh, I didn't even know that was an option for the image information! Either way, I will not be using that feature anyhow, so this seems to be resolved for me.

   Thanks again.

   Posted 11 months ago #
7. 

   Devin
   Moderator

   Glad you found a fix that works for you then :)

   Let us know if we can help with anything else!

   Regards,

   Devin

   Posted 11 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.