Design changes in normal view and toggle preview

Design help General
1

Hello,

I am new to the webflow. I am trying to design a website for myself. As you can see in the pictures below the first is designer view and the second is the toggle preview. Why is the design changing when i preview it? Any help would be much appreciated.
Thank you.

Design%20view

Toggle%20Preview

2

Hi,

Welcome to Webflow! Could you provide a read only link so I can have a play with your site to troubleshoot?

3

Ki @JSW,

Thank you for your response. Here is the link:
https://preview.webflow.com/preview/michaels-trendy-project-560a65?utm_medium=preview_link&utm_source=designer&utm_content=michaels-trendy-project-560a65&preview=3a42219c93e8a35ef3e68c13d5eb4987&mode=preview

Cheers,
Yogesh

4

Hi Yogesh,

I did this:

  1. Add a DIV block inside ‘DIV Block 4’ with the following positioning:
    50
  2. Drag both headings inside of the new DIV block.
  3. Remove the both headings positioning, so that they are set to default.
  4. Mine looks like this:
    11
    11852×650 41.7 KB
5

Hi @JSW,

Ahh Thank you very much I was getting frustrated on this. One more question: Why should the headings be in the div block only?

cheers,
Yogesh

6

I put both headings inside the DIV block so that the DIV can be aligned, rather than the headings. A DIV is essentially a container element, so in this case, you’re just using it like a text box to contain the headings.

Then the DIV can be positioned on the page where you need it, rather than trying to position each individual heading element.

7

Alright, I understand!! Thanks James :slight_smile: