Centric theme home widget 1, maybe others

[ACEkin]

Hi all,

I am working on a prototype using Centric child themd for a client who wants an opening page to look like:
http://www.gravityswitch.com/

with an image appropriate for his business. I tried adding an image in the text widget:
http://www.testbed.biz/

but the widget size is hard to figure out and the image floated to right does not behave well when the screen width is reduced. Ideally, I would like the text to flip under the image on small screens but I cannot even get the widget with to come close to filling the width of the view port. Is it defined elsewhere outside the CSS?

Any suggestions will be much appreciated.

Thanks in advance,

Cemal

http://www.testbed.biz/

[ACEkin]

I have since moved the text widget to Home 2 position and the behavior is somewhat similar to what I want. I am still interested in learning how to change the behavior of Home 1 widget area.

Cemal

[ACEkin]

Just to close the loop, I have resolved the issue above. Here is my approach for anyone dealing with a similar situation:

1. I decided not to use the first widget area and stuck with the second one
2. I also bypassed the theme instructions and placed a text widget with the following code, note the divs and new classes added:
   <div class="inwidget-left">
   <h1>Be the Center of Attention and Demand Focus</h1>
   Stopping eyeballs in their tracks is not easy. You need a design that demands focus, a story that generates impulse, and they must integrate seamlessly. Centric, built on HTML5 and mobile responsive, gives you all of it. So what do you want to do online? Sky's the limit.</div>
   <div class="inwidget-right">IMge Link</div>
   <div style="clear:both;"> </div>
   <div style="text-align:center;"><Contact link>Contact Us
3. I added the following to the custom CSS:
   /* As screen width narrows center and adjust the header elements */
   .inwidget-left {
   float: left;
   max-width: 45%;
   text-align: left;
   }

   .inwidget-right {
   float: right;
   max-width: 45%;
   text-align: left;
   }

   
   @media only screen and (max-width: 1023px) {
   .home-widgets-2 .widget-area .inwidget-left, .home-widgets-2 .widget-area {
   width: 100%;
   float: none;
   text-align: center;
   }

   .home-widgets-2 .inwidget-left {
   float: none;
   max-width: 100%;
   padding: 0;
   text-align: center;
   }

   .home-widgets-2 .inwidget-right {
   float: none;
   max-width: 100%;
   padding: 0;
   text-align: center;
   }
   }

There may have been more efficient way of handling the situation but this is the best I could do. One option that may be worth considering, and I am, is to put the H1 block outside the first div to it stays above both blocks.

Cemal

[Author]

Posts