Return to previous page

Rows not correct on phone - by capri_2794

This topic has 9 replies, 3 voices, and was last updated 5 years, 1 months ago ago by Rose Tyler

capri_2794

Participant

March 7, 2019 at 11:33

Hello,

I made half row image and half row test. But now that I see on phone, it looks very bad. There is too much space before and after text(which I do not want to be there on phone but need it on desktop to be in center of image.

Also, the picture has become too small in height. I want the image to remain the same size in mobile too and text to be just below it.

Kindly help me in this regard

Please, contact administrator
for this information.

#210558 Copied Theme version: Royal WooCommerce version: dontknow

8 Answers

Rose Tyler

Support staff

March 7, 2019 at 12:01

Hello,

You need to change 100px of padding to value in vw or vh https://www.w3schools.com/cssref/css_units.asp
Add paddings for columns with images http://prntscr.com/mujbf4

Regards

#210562 Copied

capri_2794

Participant

March 7, 2019 at 17:43

Thank you. It now looks good on phone but there is issue on desktop. I want the whole image height but it is being cropped in desktop version. I want the rows to have no gap between them too.

Also, on whatever side image is on desktop (left or right) I want it to be above the text on mobile. Kindly suggest how to do this too.

#210593 Copied

capri_2794

Participant

March 7, 2019 at 17:51

Also, I want one page to have single picture and its related text, both on phone and desktop.

Please contact administrator
for this information.

#210595 Copied

Olga Barlow

Support staff

March 11, 2019 at 12:32

Hello,

If you check the page that you provided you’ll see that paddings of the text are much bigger than you used http://prntscr.com/mw9ef7 So, if you set the paddings for your text in vw http://prntscr.com/mw9dsm you’ll get almost the same result https://gyazo.com/b752328cd125c2d00f9da891b3c857ca
Also, probably you saw all the images on your example have some space above and below the pictured things http://prntscr.com/mw9thq it allows to avoid cutting during resize.

If you use bg cover for the column, please, check the documentation on how the bg cover works to understand the main point and choose the correct values for the paddings, margins etc https://www.w3schools.com/cssref/css3_pr_background-size.asp

Regards

#210709 Copied

capri_2794

Participant

March 13, 2019 at 20:47

Thanks a lot for the detailed reply. Just one more thing:

On whatever side image is on desktop (left or right) I want it to be above the corresponding text on mobile. Kindly address this too.

#210879 Copied
Rose Tyler

Support staff

March 14, 2019 at 09:21
Add custom classes for columns of rows where the order of elements should be changed on mobile http://prntscr.com/mxo9x4 http://prntscr.com/mxoa7i and add custom CSS code (Theme Options > Custom CSS > Global custom CSS):
```
@media only screen and (max-width: 778px){
    .custom-order-1 {
        order:  1;
    }
    .custom-order-2 {
        order:  2;
    }
}
```
Do norget to clear cache before checking the result.

Regards
#210892 Copied
capri_2794

Participant

March 16, 2019 at 09:32

It’s done, thanks a lot 🙂

#211025 Copied

Rose Tyler

Support staff

March 18, 2019 at 08:07

You’re welcome!

Regards

#211050 Copied
Viewing 9 results - 1 through 9 (of 9 total)