Jump to content


Photo
- - - - -

About This Theme & How The Did It


Best Answer Rob , 23 December 2012 - 06:47 PM

We are not permitted to provide CSS solutions, and since that designer is also one of our pro developers, my best recommendation would be to hire him as he's going to know exactly how he did that, and why the condition exists.  He'd be best suited to resolve it as well.

 

That said, he has this in his CSS for the section:

 
margin: 0 4px 10px;

Now, if I change it to:

 
margin: 0 10px 10px 4px ;

That would eliminate an extra bit of potentially erroneous space on the right side and could eliminate the gap causing the misalignment in mobile devices.

 

It falls under #sb_footcols .texture

 

That said,  I cannot test it on a mobile device, so I've no idea, which is another reason why you'd probably be best hiring the developer as a pro.  http://www.pagelines.com/pros

 

Again, px is usually not responsive, so I'm not sure if this is 'the' solution, and it's admittedly a huge guess on my part.

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 nondualit

nondualit

    Member

  • Members
  • 18 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 03 December 2012 - 08:38 AM

Hi,

 

Im wondering how to make the square on the main site like the did on this one 

Please Login or Register to see this Hidden Content

They made the header en the content differen than the footer. It looks really nice but have no idea how to make this

Any help?



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16313 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 December 2012 - 09:00 AM

Hi,

 

The site you have linked is not loading for me ?

 

You can use the web developer tools that are now bundled in modern browsers or use Firebug, inspect the website and you view the CSS used for both the header and footer.



#3 wonderwoman

wonderwoman

    Super Member

  • Members
  • 103 posts

Posted 03 December 2012 - 11:45 PM

near as I can tell (using firebug), they're using images to create the effect.

You're right - nice looking site :-)



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 December 2012 - 11:53 PM

It looks like this has been done with css, using the border-radius and box-shadow commands on the footer.

 

The page-canvas has shadow applied and i would imagine this is using the 'content-shadow' option in the color control tab (this only works if the site is set to fixed width sections'. In the color control tab you can also set the colors for the page/content areas to be different from the background.

 

Hope this helps :-)


  • nondualit likes this

#5 nondualit

nondualit

    Member

  • Members
  • 18 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 23 December 2012 - 10:08 AM

It looks like this has been done with css, using the border-radius and box-shadow commands on the footer.

 

The page-canvas has shadow applied and i would imagine this is using the 'content-shadow' option in the color control tab (this only works if the site is set to fixed width sections'. In the color control tab you can also set the colors for the page/content areas to be different from the background.

 

Hope this helps :-)

 

James thanks for your help! you guided me in the right direction.

 

I reproduced the footer on my website 

Please Login or Register to see this Hidden Content

and im happy with it. But sill have a minor issue, when looking at this website on the IPAD of mobiel the footer doesnt adapt the same way as on computer. The footer get a little bit bigger than the body, not that bigger but i would like it to adapt as it was on the computer screen.

 

the code im using for the footer

 

 

#footer .texture {
 background: #dddddd;
 margin: 0 4px 10px;
 display: block;
 border-radius: 0 0 15px 15px;
 -webkit-box-shadow: inset 0 12px 8px -8px rgba(0, 0, 0, 1),inset 0 0 20px rgba(0, 0, 0, 0.3),0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 12px 8px -8px rgba(0,0,0,1),inset 0 0 20px rgba(0,0,0,0.3),0 1px 5px rgba(0,0,0,0.5);
box-shadow: inset 0 12px 8px -8px rgba(0, 0, 0, 1),inset 0 0 20px rgba(0, 0, 0, 0.3),0 1px 5px rgba(0, 0, 0, 0.5);
}


#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16313 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 December 2012 - 11:12 AM

Can you provide a screenshot of this issue please and also what are your layout settings ?


  • nondualit likes this

#7 nondualit

nondualit

    Member

  • Members
  • 18 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 23 December 2012 - 01:26 PM

Capture.png

 

setting are

- Responsive with Pixel Width

i tested Responsive with % Width but than the footer becomes really small (maybe an idea to use this an alter the footer size?) dont know is this is the right way to do it

- Fixed-Width Mode



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 02:22 PM

The reason for this is simple.  You'll see it in the CSS copied above, which shows px dimensions applied to the curved corners and particularly, to margins.  Since responsive design needs either em or percentages to function properly, those variables will tend to throw-off the fully responsive nature of the section.  I suspect it was difficult to combine the curved corners with a percentage or em width margin, as this is a highly skilled designer.

 

Still, his design didn't break the mobile view, so in essence, it worked. The amount of margin effect that the footer indent would have shown on a mobile device would have either been quite miniscule or too grand for a good visual effect.  I think the key is, if you're trying to emulate or replicate, is to just make sure that the footer doesn't get so wide that it causes the mobile browser to require adjustment to see the full width (scrolling side-to-side).

 

Hope this helps!

Happy Holidays!


  • nondualit likes this

#9 nondualit

nondualit

    Member

  • Members
  • 18 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 23 December 2012 - 03:43 PM

The reason for this is simple.  You'll see it in the CSS copied above, which shows px dimensions applied to the curved corners and particularly, to margins.  Since responsive design needs either em or percentages to function properly, those variables will tend to throw-off the fully responsive nature of the section.  I suspect it was difficult to combine the curved corners with a percentage or em width margin, as this is a highly skilled designer.

 

Still, his design didn't break the mobile view, so in essence, it worked. The amount of margin effect that the footer indent would have shown on a mobile device would have either been quite miniscule or too grand for a good visual effect.  I think the key is, if you're trying to emulate or replicate, is to just make sure that the footer doesn't get so wide that it causes the mobile browser to require adjustment to see the full width (scrolling side-to-side).

 

Hope this helps!

Happy Holidays!

 

HI Rob,

 

how do i do this?  "make sure that the footer doesn't get so wide that it causes the mobile browser"

 

im sure there is a option i can give to make this happen, i cant find out how.

 

I tested with 1em & i get the same effect but still i little big.. is not a big problem. But i know there is a solution.



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 06:47 PM   Best Answer

We are not permitted to provide CSS solutions, and since that designer is also one of our pro developers, my best recommendation would be to hire him as he's going to know exactly how he did that, and why the condition exists.  He'd be best suited to resolve it as well.

 

That said, he has this in his CSS for the section:

Please Login or Register to see this Hidden Content

Now, if I change it to:

Please Login or Register to see this Hidden Content

That would eliminate an extra bit of potentially erroneous space on the right side and could eliminate the gap causing the misalignment in mobile devices.

 

It falls under #sb_footcols .texture

 

That said,  I cannot test it on a mobile device, so I've no idea, which is another reason why you'd probably be best hiring the developer as a pro. 

Please Login or Register to see this Hidden Content

 

Again, px is usually not responsive, so I'm not sure if this is 'the' solution, and it's admittedly a huge guess on my part.