Why is my content editing window not adjusting to my page layout?

[RJoseph]

I am adding and editing Pages and I feel that the content window is too small and cannot by dynamically made larger. For example: I've added a table that has 4 columns. Each column will have a picture in it 200px wide. The editing window is too narrow to see the whole table so I have to scroll right to see the 4th picture to edit with hyperlinks and text. However, the picture is either cut-off or does not show at all except the drag handle squares for the picture perimeter. When I preview the page, everything displays correctly, just they way I want it.

WHY is the content editing box not dynamic? It makes editing with more page content very challenging. If thereis a solution or suggestion I would be greatful!

Using Debut theme.

[LitExtension]

Hi @RJoseph,

Are you referring to this?

It belongs to Shopify admin, you can't edit it. You can switch from drag and drop attributes to edit HTML, it will work better.

Or you can contact Shopify directly for detailed support, refer https://help.shopify.com/en/questions#/contact 

Hope it helps!

[MS_WEB_DESIGNER]

Hi @RJoseph,

I am Anni From https://www.task4store.com/  - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern.

-Kindly Provide your Store URL,
-Also Mention on which page you are facing this issue

Note: If your store is protected with ‘store Font password’ please Send it here or DM me.

If you have any concerns feel free to ask me!

Regards,
Anni 

[RJoseph]

The problem is that when I insert images into the table (that is in the content area) of the page I'm building, after I resize the images to the size I want, then scroll to the left or right to edit further, the image gets cut off at the content editor box width. See attached screen shot. Why can't the content editor box be resized to show the full page width for editing. When I preview the page, everything is fine.

In the picture below I have a 4 column table with an image in each of the columns. The first two images from the left show fine, but the 3rd is cut off and the 4th doesn't even show. If I make the images really small, meaning that they all fit within the editing box (I don't have to scroll left or right) they all show, but when I make them bigger, they get cut off.

[LitExtension]

Hi @RJoseph,

With drag and drop of the content page, it only partially supports you to design the page. If you want to create standard or complex interfaces, you need to have knowledge of HTML and CSS, it will be important as you do everything well.

Hope it is clear to you.

[Mark_Block]

Simplicity is the very thing Shopify pushes in their ubiquitous advertising across all media channels. When you get here and try it, the interface is a massive disappointment. Is this all to satisfy the eCommerce side of things? Or is it lack of proper engineering of Shopify's own UI where us paying customers have to build things from limited options. As a result I've decided to build this elsewhere and link to Shopify for the product purchase pages only.

[LitExtension]

Hi @Mark_Block,

Yes, there are some apps that support this, you can refer to it: https://apps.shopify.com/pagefly

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[Mark_Block]

I've been away from this editor for months and now that I'm back, it reminds me how bloody frustrating this editor is. Screen space taken up by everything but the thing you want to work on. Horrible. I've been here starting several years ago getting this set up if & when I have time and wasted tons of money in the process because shopify is charging me FULL RETAIL even though I'm not live yet.

The first thing this needs is a complete rethink on the editor.

Will probably build my pages elsewhere using WYSIWYG then embed what I've got, because this scrolling for views through a tiny window is like building a ship in a bottle.

[PageFly-Victor]

Hi @RJoseph ,

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

You should use a page builder app to build your website. And I recommend that you can try our app.

Currently, we provide an offer to build 1 page for a customer for free, to guide them on how to use PageFly. If you are interested, check out more about us here. We will try our best to help, with our Live chat 24/7 support team.

Besides building attractive and powerful pages, you should spend more time focusing on marketing strategies. We also have many blogs and guides to help you expand your strategy.

Let me know if you have any questions.

Good luck and have a nice day! Cheers!

P/S: Thank you @LitExtension for mentioning us. Thank you for bringing this issue to my attention.

[Ryan_Zellars]

I agree.

Making the editing window wider should not require more money, apps, or add-ons. If the theme they provide for free has a 1600px width by default, why is the editor 500?

Shopify has made so many things easy, but can sometimes miss on little things like this that can not possibly take many resources to fix. This reply window is wider than our page builder....by at least 22 characters.

Another example is this reply box is 4 sentences tall.

[FalconSEKIDO_Te]

absolutely agreed.  why Shopify can not make a simple modification to this issue?  perhaps, they just do not know and we need to raise our voice clearly and loud?   ps, I strongly do not recommend installing Pagefly app.  This app is a mess and you will regret as it is nightmare to uninstall.  they spread their coded pages all over the places.  At this moment, there is no option.  I simply copy & paste the entire code to other app like Text, compose it there.  it is silly but it is only way to get around at this moment.  if you guys know any other solution, please let me know.  or Shopify should definitely improve this simple issue.  feel like we are back in early 2000. 

[PageFly-Kate]

Hi @FalconSEKIDO_Te ,

This is Kate from PageFly team. I'm so sorry about your experience with our app. 

I would appreciate more details about your problem with PageFly so I can offer suitable suggestions because we really want to improve the quality of customer experience. Are there any theme conflict on the PageFly page when you use it?

Normally, the PageFly code will not affect any default theme pages unless the customers asked us to modify their code for a specific feature. Besides, we have new feature that allow customer chooses to remove all PageFly code when you uninstall app.

I think it's better to using a page builder app, like PageFly, Shogun, GemPages because it's really easy to drag and drop element and set up the style with no coding knowledge needed.

Please let me know more detail so that I can support you use our app easily.
Regards,
Kate | PageFly team

[scottn]

So I know this is an old post but I think I found a solution that some will find helpful today. Definitely agree that Shopify needs to add a full screen option here or something to make this experience better.

My solution is to increase the width of the narrow container within the online-store app's iframe. This has the added benefit if giving you more screen real estate on all the online store pages.

Step 1: Add a browser add on like Stylebot that allows you to save CSS rules for specific websites

Step 2: (Stylebot Specific): From the style bot extension click Options > Styles > Add a new style

Step 3: Add a new style rule for the URL https://online-store-web.shopifyapps.com like so:

#app div[class^='Polaris-Page_']{
  max-width: 100%;
}

That's it! Stylebot lets you toggle the style off an on as you need it if you want. I have a feeling I'll just leave this rule on all the time.

[Mark_Block]

thanks! yes the window has gotten bigger since I posted my
complaint...however, I work with 3 monitors and would dearly love to be
able to drag the editing window over to another screen for a less claustro
environ -- Stylebot sounds like a great solution to anyone wanting to
customize the shopify editing experience!

[maiangel]

It doesn't work now. Is there any way we can fix it? Thanks in advance. 

[scottn]

Hi Maiangel, I think they changed the classes a bit. My latest CSS (That works) looks like this:

/* Increase the width of the main column */
#app div[class^='Polaris-Page_']{
  max-width: 100%;
}

[maiangel]

Thank you for your help Scottn. Seems it doesn't work with mine. Maybe it is because we had a modified Dawn theme by our developer. 

[scottn]

The Dawn theme shouldn't matter on the admin. Try this?

/* Increase the width of the main column */
#app div[class^='Polaris-Page_']{
  max-width: 100%;
}
#app .Polaris-Page, .Polaris-Layout__Section{
  max-width: 100%;
}

[maiangel]

Thanks a lot. Not sure if I'm doing it right.
It looks like this in the Stylebot, and nothing has changed yet.

[image: image.png]

[maiangel]

I tried it again, it works!!!! Thank you so much Scottn, you're a life saver!!!