Hello. I am having a lot of trouble with my page looking good on mobile.
The social media buttons on this “let’s get social” section are stacking weird. Can they be stacked evenly or stay across in one row?
This timeline section is also messing up on mobile. The image is going behind the text.
I am working on the page: https://revealhm.com/beauty-tips/
Hi Ashley,
Thank you for writing in, regarding the social icon issue, please give an equal margin to your icons all around. I see that you only applied 1.5em margin-right. Please change that to 0.25em all around (top, right, bottom, left) so it will be balance all the time.
Regarding the second issue, that 2 columns layout is not going to work on narrow screen starting at 979px and below, what you need to do is change that layout to 1 column starting at medium screen (979px) and below.
Hope it helps,
Cheers!
Regarding the second issue, how do I get to that screen to change the layout to one column? When I press on the smaller screen size on the left this is all I see.
Hi Ashley,
You are using the Classic section and the responsive styling will not apply to it. I suggest that you use the version 2 section which will have the same setting as my colleague posted above.
I also highly recommend watching our Responsive Styling tutorial for you to have knowledge of how it works.
Hope that helps.
Hi! Thank you so much for sharing that video with me. I was able to successfully change the smaller screens to a one column layout.
However, in the one column layout, the photo is being cut off. We like the look of the images on the wide screen version overlapping each other like in this first photo.
But it cuts off the photo in mobile.
Even if I erase the padding on the sides, the photo is still cut off on mobile.
How do you suggest keep that photo from getting cut off?
Thank you!
Hi Ashley,
I see you applied a fixed width on those images. Please apply a max-width instead, so when the screen gets narrower those images will scale down.
Cheers,
Awesome, that fixed it! Thank you!
I was wondering if it is possible to rearrange the order of the elements on mobile.
We want the order of all of the sections to be like this first section: Year, pictures, headline, text.
The second row is arranged: headline, text, year, pictures.
Hi Ashley,
There is a way using the Reverse Column option (please watch the video below for details).
Layout Tricks: Reverse Column Order Responsively
However, these is not possible with your current layout since you put all the Columns in one Row.
The 2 columns should be in separate ROWs to do the Reverse Column method.
Thanks,
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
