Hi on my android phone the logo to my store looks right justified, is there any way to
help make it more centered on a mobile device?

Hi Dano

Just after

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

add

.col-4{text-align:center}

in style.css

Andy

Please feel free to review / rate our software

Hi Andy, it didn't seem to work, here is the code,does it look correct? Could it also be that there
are 2 other style.css files?

/*This is the fifth breakpoint and contains styles for screens 500px to 360px*/
@media screen and (max-width: 500px) {
.col-4{text-align:center}
.top_row .col-6 { width:100%;}
.top_row .text-right { text-align:left; padding-top:10px;}
.logo_row_right .topsearchWrap,
.logo_row_right .phone_no { width:100%; padding-bottom:15px;}
.logo_row_right .topsearchWrap { padding-bottom:0px;}

.product_details .col-6 { width:100%; padding-bottom:15px;}

You have three style.css files? There should only be one. You can modify the the css file and reload your page to see the results real-time.

Is there a closing }

Did you modify the othe style.css files to see if that helped?

Mark
Responsive Design Deals Ecomm Plus - ASP 6.8
www.paradiseclothingco.com

It's style.css in the /css/ folder that you would want to edit.

Andy

Please feel free to review / rate our software

Hi guys, just to reiterate, this is for centering the logo (says SafetyProShop.com) so it looks centered on a mobile phone?

I deleted the other 2 style.css files then I checked the one in the CSS folder. I then uploaded
the file in the CSS folder but it still didn't center the Logo.

Here is how the code it looks right now:

.services_row .col-4,
.ft_row1 .col-2,
.ft_row1 .col-4,
.ft_row1 .col-3 { width:100%; padding-bottom:20px;}

}

/*This is the fifth breakpoint and contains styles for screens 500px to 360px*/
@media screen and (max-width: 500px) {
.col-4{text-align:center}
.top_row .col-6 { width:100%;}
.top_row .text-right { text-align:left; padding-top:10px;}
.logo_row_right .topsearchWrap,
.logo_row_right .phone_no { width:100%; padding-bottom:15px;}
.logo_row_right .topsearchWrap { padding-bottom:0px;}

.product_details .col-6 { width:100%; padding-bottom:15px;}

}

/*This is the last breakpoint and contains styles for screens below 360px*/
@media screen and (max-width: 360px) {

}

The logo looks perfect at 500px, try clearing your browser cache.

Mark
Responsive Design Deals Ecomm Plus - ASP 6.8
www.paradiseclothingco.com

Hi Paradise, are you looking at our site on your cell phone? I just cleared
cache on 2 of our phones and the logo is still right justified..

Hi dano2

Just had a look on my Android 8 handset and the logo is definitely over to the far right edge of the screen in portrait view.

Will - Bolton Manchester UK

thanks Will, yes, that is exactly what I'm seeing too. Not sure how to fix it though... will see
if anyone can help.. thanks for checking and confirming what i see :)

After that line I gave you in style.css you can add

.headerWrapper .container{padding-left:0px}

Andy

Please feel free to review / rate our software

This looks like it will work on smaller screen sizes.

@media screen and (max-width: 500px)
.col-4 {
text-align: center;
padding-left: 5px;
}

Mark
Responsive Design Deals Ecomm Plus - ASP 6.8
www.paradiseclothingco.com

Guys that worked, thanks so much Andy...

now on to more stuff :)

That's spot-on :-)

Will - Bolton Manchester UK

yea looks good Will :) only thing is not sure if that affected
the navigation button, its now pushed over the the left:(

What changes did you make?

Mark
Responsive Design Deals Ecomm Plus - ASP 6.8
www.paradiseclothingco.com

Hi, Andy

In my style.css, there is no @media screen and (max-width: 500px) {
There are original 1000px, 980px, 800px, 768px, 640px, 480px, 360px

Do I need to add 500px?

Hi Jim

Yours may have been set up differently - is it the same question that you want to center the logo on mobile screens?

Andy

Please feel free to review / rate our software