Ipad/Tablet responsive

[sasa83]

Hi

 

I have been developing a theme for my own webshop by modifiying the.CSS and some .TPL files until a desired layout is achieved.

 

I've continuously been testing the results in 4 broswsers: Firefox, Chrome, IE and Safari

All 4 is looking good. But when I go to my Ipad the whole site moves to left and additional space appears on the right side. It's like that the whole page moves to the left side.

 

Most of my "positions" in the CSS is set to "absolute" and I think for responsive design it should be set to "fixed" but I'm not sure and pretty confused at the moment!

Can anyone help so that everything stays at their positions no matter screen size, or help me to make the whole thing responsive so it fits into all screen sizes.

url: www.weekendcph.com

 

 

[vekia]

hello

you have to define media queries in css

then you will be able to define styles according to screen resolution (device size)

 

btw. im on chrome, and i see scrollbars

 

it's not good :/

[sasa83]

Thanks for the reply. Can you specify which .css files I need to define media queries in? Is it the main grid or should each module .css as well be defined with media queries?

Thanks.

hello

you have to define media queries in css

then you will be able to define styles according to screen resolution (device size)

 

btw. im on chrome, and i see scrollbars

 

it's not good :/

And the scrollbar in chrome might be caused by the same issue...

[sasa83]

Hi again!

I have seen that the page behaves differently on different screen sizes!

 

So far I've figured out that the grid_prestashop.css might be one of the right places to put the media queries in, but I haven't found any detailed tutorial on this so I'm kind of lost   

 

What I really would like to solve, is the problem with the expandable right side/column which increases in width depending on the screen size.

How can I remove the right and left columns and just utilize the page's whole width, regardless of the screen size?

 

Hope someone can help....

[vekia]

let's clarify.

default theme in prestashop 1.5 (your theme is based on default template) is not responsive.

to create responsiveness you have to modify entire theme, there is no "how to" because it's not as easy as it seems (because you have to modify a lot of things in your shop).

 

at the moment, the only one thing that we can do, is a little suggestion,

check this module: 

•   psresponsivetheme.zip   4.8KB   436 downloads

 

this module modifies default theme to be a responsive one,

try to use it

[sasa83]

let's clarify.

default theme in prestashop 1.5 (your theme is based on default template) is not responsive.

to create responsiveness you have to modify entire theme, there is no "how to" because it's not as easy as it seems (because you have to modify a lot of things in your shop).

 

at the moment, the only one thing that we can do, is a little suggestion,

check this module: 

•   psresponsivetheme.zip   4.8KB   436 downloads

 

this module modifies default theme to be a responsive one,

try to use it

 

Thank you for the clarification! I installed the module, but as you say it is optimized for the Default theme and since I have customized my own theme, making the responsiveness look nice is not gonna be easy...

 

So back to what I tried to say in earlier posts - if we forget about the responsive design - can you or anyone help me with positioning so I can have one fixed position for everything, no matter size of screen!

When I "restore down" my window the bottom scroller increases and a increasing white bar in the right appears! I know this might be caused by my modifications of some margin-right sizes (or similar), but I simply can't find where or which! I would really appreciate some help on fixing this issue!

I have attached to screenshots.

Nr 1 is the normal case where the browser is maximized

Nr 2 is the "restored down" browser where the white space appears in the right

 

Nr 1:

 

 

Nr 2: