My read-only LINK is pasted below, & I have to mention that when I set all the positions in the right place on iPad screen and landscape mode, then when I go back to it in preview - it’s all over the place again!
I really hope somebody can help, as it’s stopping me from submitting my work and I am so behind already just because I chose webflow as my website provider.
Hi,
You seem to have tried a bunch of things without success, I will try my best to help you
The padding add space inside the elements, and margins add (or remove) space around the elements. On other words, the paddings will make the elements bigger, even if you don’t see like it. To see the actual size and limits of the elements, I suggest you to use the x-ray mode to see the actual size and space around your element, when you will hover on the page you will see a lot of red and greed, what is red is margin and green is padding. (I made you a print screen below to know how to activate it)
Think mobile, but design from the default desktop mode
-
Move the contact page symbol outside the grid
-
Remove the content that cause the more problems and remove every single class (selectors) of the remaining items, I know it’s frustrating, but you will be easier than resetting everything manually. The goal is to reset every padding, every margin and every height or width.
Be sure to check every single elements of your design using the navigator and check the selector.
-
Create a new grid, place it over the contact page symbol
Change it’s aligment to center - center
-
Place one div-block, one image, one div-block, one image. It will be your base design
-
Place one heading and one text block inside the divs (inside the grid). To place elements inside the divs when they are in a grid, I use two options, either I drag it inside using the navigation, or I hold CRTL (on pc) while a drag it inside the
div.
-
Give the same selector name to the headings, and same selector to the textblocks (it will make it easier to edit later)
-
Replace the headings by your titles, and the text by your text
-
Replace the images by the ones you want
-
Go to mobile view and delete one column, if you want to inverse one text and image only on mobile, set the image you want to move to manual and than move it, it should move only on desktop
You can then adjust the sizing of your images as you want and redesign what was lost in the process.
I ended up with that following what I said
I you want more liberty with the placement of an image, place it inside a div (and give the div a minimum height). Set the div to position relative and your image to position absolute and move the image using absolute position. They will move relative to the div without breaking everything.
I hope it will help you, the most important is to not give up!
2 Likes
omg, thank you so much Yaca, I didn’t try the x-ray thing, didn’t know about it.
a lot of things are making sense to me, although I am scared to loose the contact symbol as I like it exactly how it is. I will keep you updated!
2 Likes