Preview different from design

Need help
1

Hi there :slight_smile:

My preview is showing up differently than what I have in my design page. How can I make it so that the preview looks exactly like my design page?

Here is what it should look like based on my design page

image
image2746Ă—1344 331 KB

Here’s what the preview looks like.

image
image2638Ă—1318 201 KB

Also a separate question, how do I set the page/shape design dimensions to full screen, so that the content of the page fills up the screen 100% no matter how large or small the viewer’s screen is? An example of what I’m trying to accomplish is this website: http://urgent.agency/category/urgent/
Try making the browser large or small and notice that the design either shrinks or enlargens but everything still stays full screen.

thank you!

https://yka-internship.bubbleapps.io/version-test/main?debug_mode=true

2

I’d need to see your editor to be sure, but it looks like there are 2 problems:

  1. The white space is either a result of a random group on the page OR more likely, there is a random element in your header that is causing it to expand it.

  2. The Edit Me text seems to be the same as #1.

This should be an easy fix,
Daniel

3

Thanks, Daniel! I can’t seem to locate the random group or element.

How can I share the editor with you so you can take a look?

4

In your settings, change your app to public. Then share the url for your editor.

5

Thanks, Daniel. Can you please check this link? I made it public.

6

Done. You have to check all of your elements to make sure you don’t have any that you don’t want.

7

Got it! Do I do that in “element tree” on the left side menu bar? So helpful, thank you!

1 Like
8

Correct! Keep up the good work.

1 Like
9

Thank you!!

Do you also know the answer to my other question? here it is again. let me know if it doesn’t make sense.

how do I set the page/shape design dimensions to full screen, so that the content of the page fills up the screen 100% no matter how large or small the viewer’s screen is? An example of what I’m trying to accomplish is this website: http://urgent.agency/category/urgent/ 1

Try making the browser large or small and notice that the design either shrinks or enlargens but everything still stays full screen.

10

Your page is already set to full width. It just looks like the contents haven’t been stretched over the entire width of the page.

11

thanks, daniel, you are super helpful.

two quick questions hoping you can help wtih:

  1. how do i know the max width within the editor so i don’t stretch out the contents beyond the max?
  2. when i click preview from my “main” page that i created, it shows a preview of the “index” page. Do you know why this is happening/how to fix?

thank you!

12

Nevermind on question #1. it’s working now.

However, now I have this problem. In my editor, the header and the shape width appear the same preview is showing different width per below. How do I change it so that the width size aligns to the max width of page? My editor is public here in case you want to take a look: yka-internship | Bubble Editor

image
image2816Ă—1318 221 KB

13

  1. Ok

  2. doesn’t seem to be a problem.

  3. This is how you have the shape set up.

    58%20AM
    58%20AM658Ă—546 34.6 KB

Tips:

  • Don’t use shapes as background colors. Put elements (texts, buttons, icons, etc.) in groups.
  • It’s a good idea to got through the Bubble tutorials. They aren’t the most exciting thing in the world but you’ll learn how to properly use the editor.
14

thanks :slight_smile: i did go through the tutorials but perhaps i need another refresher.

per your suggestion, i removed the shape as background color and used the setting in “appearance” instead. I’m trying to change the background from black to white in different sections of the page but can’t figure out how. I want the background color below the pink line to be white. The conditional formatting doesn’t seem to have “current page HEIGHT” as an option. What would you suggest I do?

image
image2284Ă—1354 243 KB

Thank you! I feel like I owe you a drink for helping me out so much by now lol

1 Like
15

You’re thinking way to hard about this. The page structure can be as simple as:

Section 1 is a Group with a black background color

Section 2 is a Group with a white background color

Section 3 is a Group with a pink background color

etc.

1 Like
16

Hi Daniel, your tips helped a ton. Got me thinking the right way. I’m now stuck with a circular reusable element error and cannot figure it out. Mind taking a peak? In my preview page, I see 2 of those errors show up. Looks like one is from “header_main A” and the other from “Signup / Login Popup”/

Here’s my editor open to public.

Thank you!

17

This topic was automatically closed after 70 days. New replies are no longer allowed.