Hello!!
As shown in the picture below I have created multiple sections with sliders on opposite sides. When I turn it mobile phone as it is logical it takes one column under the other, but I don’t want them in that order. I want the text to be on top and the slider on the bottom. Is there any way to create that without having to change the design in the desktop mode?
On mobile, there’s not a lot of room for elements so they go one under another in the HTML code order.
So you want the HTML order to be text then slider, start by putting the text block on the left.
Then to display it on the right side when there’s room, try applying float:right to the text block.
Should do… althought I hate involving floats, it’s quickly a mess.
This is an issue many people have had. I avoid using the column element as much as possible. I use divs with floats and % widths to make the column structure I want, this gives me more flexibility to different devices.
In your situation I think I would user divs with a width of 50%. You will have a stack of divs that take up 50% of their parent container.
Now Place your text in the first div your slider in the second and repeat this for all of your sections.
Create a class name that floats to the left and a class name that floats to the right and place these names on the appropriate div.
In your phone view change the div widths to 100% and they should stack with the Text on top of the slider.
1 Like
Yep it works. I just used 2 sections, 2 divs in each, set at width 50%.
The text div of the second row is placed on the left but set to float:right.
https://v.usetapes.com/VPCHkpLVye
http://vincent.polenordstudio.fr/snap//Webflow_-_My_Sandbox_2015-02-03_18-18-50.jpg
1 Like
Thank you very much guys. since i am new to webflow @vincent could you be able to send me your public link so i can see the correct settings???
Here is a public link to a simplified example.
https://webflow.com/design/alcassdesignsite?preview=1eecdac5a638e354bf38ca604466de06
1 Like
https://webflow.com/design/gaston?preview=8813b47e5c937093c784d57722827e47 THIS IS MY PUBLIC LINK LOOK AT THE SECTION CALLED MENU_SECTION. I HAVE SET THE SETTINGS EXACTLY LIKE YOURS BUT IT STILL DOESN’T WORK.
Scrap the columns and just use div blocks, It is a much simpler HTML structure (take a look at the navigation panel on the left side of the designer in my example.)
2 Likes
@athina_tzan, I built a version of this last week using the float left and right and element order for another thread:
Look at the Navigator to see the swapped order of the content divs. Notes are in the document.
Hope it helps - Rob
1 Like
Yes it’s here : http://sab.webflow.com/float-right
click on the green button in the menu for the complete project public link
1 Like
thank you all for you help!!! I made it work. But i have one more question. I am working webflow on an imac 27". although everything here looks fine when i opened the site on the a laptop and a mac laptop everything is messed up? I am guessing it has something to do with resolution? is there anyway to fix it?
You are using padding on your text to make the text section the right height. This means when the screen narrows and the section sections adds a new line in order to fit the text it increase the height of that section. When that happens it effects sections below it. Try removing the padding from the text and adding a height to the div block instead.
You should reprouce the structure of my example. Section with only 2 divs then repeat. div having the same class with shared values of 50%, then extra class for divs that sits on the left but displayed to the right. There’s too much complexity in your structure to fix it efficiently. For example you use one new class for each div… common parameters should be applied to just one class given to all. Then work specificities. Again, check back my example, analyze the structure, I gave you the public link and made screenshots of the structure.
1 Like
I second @vincent recommendation. Keep your CSS as simple as possible, it will speed up design changes.
1 Like
I am have changed the margin not the padding. Does it work that way for both?
I meant margin, not padding. My mistake.
Trying to come up to speed on this issue…
So basically you want…
on desktop… image and text side by side… 2 different ways
image 1 on left with text A on right
then image 2 on right with text B on left
and on mobile you want
text A
image 1
text B
image 2
Is this correct ?
I can see some issues with this design.
Yes that is what I wanted and I finally got it. What do you mean issues, please share…!!! I know I have messed up with the class names and everything, but I am new to webflow and this has to go to the client in two days, so I just named everything really quickly. But please any suggestions you have I would like them. I am planning on using WEbflow from no on, and I need all the help I can get.