Hi, on our site on the responsive version, the header/logo and top navigation looks like its left justified. Is it possible to
center both of those? I imagine it would be some CSS that I can update? Our website is wWwdOTsAFETYpRoshoPdotCOm


Thanks so much in advance...

Hi Dano2
The css that controls the logo is in css/syle.css around line 157. (.banner). I think you could just increase the width there but as the image is set as the background you will have to add a transparent border to the logo image I think.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Vince,

Ok, I changed the Logo and the top navigation links (home page, our products, view cart) back to the original way they came with our template.

If you look at the demo http://www.ectdemostore.com/rpgadgets/ and our site on a cell phone, the whole site including the
top seems to be a little left justified.

Is there anyway it can be centered?

Thanks again for any help with this..

Hi Dano2, in style.css around line under the media query max-width 400px around line 752 change the following and that should do it only for smaller screens.


change this
.container {
width: 308px;
margin-left: 6px;
}

to

.container {
width: 308px;
margin-left: auto;
}

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Hey Vince, I'm not finding this in the style.css. Is it just missing and I need to place it in there somewhere?

change this
.container {
width: 308px;
margin-left: 6px;
}


This is the only code Im seeing around line 752



/* This is the third breakpoint and is for smartphones.
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:400px) {

body{
background:url(../images/topbg480.jpg) #fff repeat-x;
}

.header {
background:url(../images/topbg480.jpg) #fff repeat-x;
height:140px;
}

/* ~~top links~~ */
.topnav a {
padding:0 5px ;
}

/* ~~ Search properties ~~*/
div.topsearch{
padding-right:10px;
padding-top:16px;
padding-left:6px;
}

Hi Dano2, sorry about that I was looking at the ect style sheet, if you do not have it in yours try adding and let us know.

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Hi Vince, no worries:)

You know it doesn't really look like it centered it. This is how I entered the code, does that look correct?


/* This is the third breakpoint and is for smartphones.
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:400px) {

.container {
width: 308px;
margin-left: auto;
}

Its centered but the elements with-in need adjusting, taking it from the site in your profile

style.css add the following to the breakpoint This is the third breakpoint and is for smartphones.

div.logo {
width: 100%;
text-align: center;
}
div.toplinks {
width: 100%;
}

Increasing the padding can give the appearance of centered try adding this to the same breakpoint.
.topnav a {
padding: 0 12px;
}

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

thanks Sinbad... so this is how I added it. Products and View Cart look centered and good but home page looks a little
far right now and the logo and top nav (home page, our products, view cart) look about the same?

/* This is the third breakpoint and is for smartphones.
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:400px) {

.topnav a {
padding: 0 12px;
}

div.logo {
width: 100%;
text-align: center;
}

div.toplinks {
width: 100%;
}

.container {
width: 308px;
margin-left: auto;
}

Hi, there are 2 top nav classes within the same breakpoint the second one would be the one browsers are going to obey since styles cascade down. I would remove the one in red.

.topnav a {
padding: 0 12px;
}

div.logo {
width: 100%;
text-align: center;
}

div.toplinks {
width: 100%;
}

.container {
width: 308px;
margin-left: auto;
}

body{
background:url(../images/topbg480.jpg) #fff repeat-x;
}

.header {
background:url(../images/topbg480.jpg) #fff repeat-x;
height:140px;
}

/* ~~top links~~ */
.topnav a {
padding:0 5px ;
}

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

that seemed to work really good!. I think it looks pretty good. On my phone the main body where it
says Welcome to our store etc, still looks just a tiny bit to the right but not much to really matter, and
it could be just my phone...

Thanks again everyone for your awesome help!

Hi, I just noticed something and not sure if there is a fix. If I hold my phone sideways to change the screen
orientation the top is still pushed to the left. Same with the Demo I noticed, http://www.ectdemostore.com/rpgadgets/

Is there a fix for this, would it be for tablets? not a deal breaker just wondering, it would be nice if the view looked the same
on all sizes?

Thanks again.

Hi you can use the following css in the section

add to breakpoint max-width 758px

div.logo {
width: 100%;
text-align: center;
}

around line 613 add width
div.toplinks {
padding-left: 0px;
padding-top: 0px;
width: 100%;
}

add these

ul.topnav {
display: inline-block;
}
div.topsearch {
width: 100%;
}

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

I added this piece to the 758px section and it works great for the logo.

When I added width: 100%; around 613 it seemed to mess up the search container.

Also, I wasn't sure where to place the below code?

add these

ul.topnav {
display: inline-block;
}
div.topsearch {
width: 100%;
}

This is what my code for that is looking like:
/* This is the second breakpoint and is for screen sizes between 468 and 758 pixels.
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:758px) {

div.logo {
width: 100%;
text-align: center;
}

ul.topnav {
display: inline-block;
}
div.topsearch {
width: 100%;
}

body{
background:url(../images/topbg480.jpg) #fff repeat-x;
}

.header {
background:url(../images/topbg480.jpg) #fff repeat-x;
height:140px;
}

p{
padding-left:12px;
}

/* ~~top links~~ */
div.toplinks{
padding-left:0px;
padding-top:0px
width: 100%;

Hi Dano, those would be added to the same breakpoint @media screen and (max-width:758px) {

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

I've added those see below, but the top nav links (home, our products, view cart) looks pushed
to the far left still and the Search box is now pushed downward


@media screen and (max-width:758px) {

div.logo {
width: 100%;
text-align: center;
}

ul.topnav {
display: inline-block;
}
div.topsearch {
width: 100%;
}

body{
background:url(../images/topbg480.jpg) #fff repeat-x;
}

.header {
background:url(../images/topbg480.jpg) #fff repeat-x;
height:140px;
}

p{
padding-left:12px;
}

/* ~~top links~~ */
div.toplinks{
padding-left:0px;
padding-top:0px
width: 100%;

Hi can you try adding the semi-color and the !important statement so that its like:

div.toplinks{
padding-left:0px;
padding-top:0px;
width: 100% !important;
}

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

ok the search box looks better but its still pushed to the left of the screen along with the links (home,our products,cart).
Also I changed the banner back to the original one that came with it just to see if there was any difference. Its pushed to the left just like
the Demo http://www.ectdemostore.com/rpgadgets/