Default Shopify CSS seems busted, can't edit site. Attached image - shopify

Out of the blue, EVERY browser shows the same problem. The left-most column is squashed and refuses to expand. It makes it impossible to edit the template options. Any ideas? thanks :-)

This looks like a glitch with Shopify and would be better addressed by opening up a support ticket with their support team
Note: If you shrink your screen width to 599px wide or less, the sidebar should expand to be 100% of the window width - this might help if you're in a pinch and need to make updates right now

Related

How to change left border width in Zen Mode PhpStorm?

I started using the PhpStorm IDE.
I found the perfect mode for coding called Zen Mode.
But I have one point to make about this. Its left border is so wide. How can I change this?
In Zen / Distraction Free mode the code is kind of centred (hence that big gap on the left: it gets bigger on a wider screen). It is by design. You may want to use Full Screen mode instead. https://www.jetbrains.com/help/phpstorm/2021.1/ide-viewing-modes.html
You may also want to check these links for some tips on how to customize your IDE:
https://blog.jetbrains.com/idea/2020/04/ui-secrets-customize-the-appearance-of-intellij-idea/
https://blog.jetbrains.com/idea/2021/02/find-your-visual-zen/
https://www.jetbrains.com/help/phpstorm/2021.1/tool-windows.html
Regarding the editor gutter width in general: see IDEA-148002 and check the comments and linked tickets there.

Rally HTML app always forces browser scroll bar - how to avoid this?

I've noticed that when I add an HTML app in Rally/Agile Central, the height doesn't fit/adjust within the browser windows. This means that a vertical scrollbar is always added.
I'm using Chrome and Firebox, but they both have this problem.
Is there a way to limit the height of the custom app?E.g., to (height - 25) so that the browser scroll bar is not necessary?
Can you share some of your code? It might help in diagnosing what's going on. A couple ideas though...
Are you using a layout for your app? This often can help with scrollbar issues.
This guide may be helpful for learning to work with layouts: https://docs.ca.com/ca-agile-central/saas/apps/2.1/doc/#!/guide/layouts
If you're just using auto layout (the default, if you didn't explicitly specify one) then you can also try adding autoScroll: false to your app's config. Note this may cause your content to be clipped if you do actually need a scrollbar though.
Here is an examle with the std list app - and it's the same whether there is anything to show or not.
I'm thinking that it is the HTML app that doesn't take into account that there is a page title, in this case "*test layout scroll bars" - and somehow uses the "full height" = the entire frame (I'm not an html/css expert)

impresspages -- Is there a simple way to align images center, left, or right?

I see it's easy to change the image size, make it link to something, or change the title and description, but what I don't see is an option to align the image right, left, or center. Am I missing something?
I'm using the Air theme, if that matters. I'm new to Impresspages.
Thanks!
Edit:
Just to make it absolutely clear what I'm asking:
I'm using Impresspages. I want to insert an image and make it align to the right, for example.
I have no trouble dragging and dropping the image widget to where I want it to go. I have no trouble uploading the image. If I wanted to, it is quite clear how to change the image size, how to add a link, and how to change the title and description of the image.
However -- I would have thought there would have been an option to align the image to the left, right, or center, but there is no such option. I have checked Stackoverflow very carefully, as well as the Impresspages site, and I don't see anywhere how to do what should be a really simple thing.
Am I missing something? Or do I need to just learn how to do without right aligning my images?
Thanks!
You can do that by dragging image widget next to other widget on any side. It that case it will align where you want. Here's an example - http://cdn.impresspages.org/core/file/2014/04/03/Impresspages_no_colum_01_1_2.gif
To make it centered is a bit tricky. There are no straightforward way of doing it.
If you really really need this, you can try using RichText widget. It allows to insert image into a text as it is in any text documents.
You can create additional skin for Image widget to be centered http://www.impresspages.org/docs/widgets#skin
Geeky way. But going to work.

Header of a WP responsive theme won't properly remain on top at the top when scrolling; position:fixed and width:any% throws it out of whack

The WP responsive theme I'm working on:
http://www.wpexplorer.me/tetris/
I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will see that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.
I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.
Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).
Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?
Thanks.
This should work
#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}
The position is fixed at the top using 0 with a z-index:999 you then need to set the width of the inner container pre-header 960px to match the rest.
You will need to setup the media queries for the other sizes you have setup. Easy, and Enjoy.
If you want the menu itself and not the social icons to become the top fixed bar without the social icons then you want to make a jquery scroll CSS change so that the #header becomes the fixed position.
It working with fixed header and social:
An illustration of it working without the social bar using a Jquery Scroll CSS change:
This is the way I would do it, I would move the menu down, and add the social icons to the menu itself. (Below is a screenshot of what I mean, the social icons are reduced to 75%)
PS. The social icons stand out to much so I would add a CSS3 Greyscale, and when the visitor hovers over them it turns on the color with a transition effect.
Hope this helps ;)

flexslider slideshow not resizing properly

I have set up the Flexslider Carousel with thumbs on my website. For some reason, when I shrink it below a certain size it does not re-size properly and then it disappears (overflow: hidden could be causing this second issue) I freely admit that my java skills are limited, so I hope that someone here will be able to tell me what I messed up...
http://studiobilodeau.com/VLSB/slideshows/the_body2.php
Thanks for any help!
v
Try this, give your containing div (#container) width either in %, so that it adjusts as per your browser window or set its width for different viewports.