On my individual product pages, there are drop down selection boxes which display the variants for my products. Because some of the variants have longer descriptions, this box becomes longer.
It's fine on the desktop site, but on mobile, the selection bar extends past the edge of the page. This seems to be interfering with a mobile menu I have at the top of the page.
As far as I can tell, i should be targeting 'variant-select-wrapper' but I have looked around a lot can't seem to find a way to shorten this box so that it fits on a mobile display.
Does anyone know a way to effectively shorten or fix the width of this box, or am I targeting the wrong thing?
Thanks
The following CSS ought to work for you, added to the CSS Editor in Squarespace (or to your CSS files if you're using Dev. Mode).
.variant-option select {
max-width: 100%;
}
This will limit the select box width itself so that it does not extend beyond its parent's width. This does not affect the width of the options within the select box, which will continue to extend outside of the parent (and the browser window for that matter) on Windows devices. However, on Android and iOS, the options will appear in a modal-like box, with the options of the text wrapped. This is an acceptable user experience in both cases I think.
To wrap the options on Windows devices, Javascript is needed (Ref. 1, Ref. 2), which is why I think this simple CSS approach is a reasonable compromise.
Related
I have a site that I'm working that has navigation bar with secondary block-level elements (images in my case) inside the <a> tags which respond to the window size by either floating or not floating. As long as a user never resizes their browser window after loading the page, the issue would never occur, but it appears as though if the page is stretched wide, and then scaled down without reloading the page, the float style attached to the main CSS declaration (not inside a #media query) fails to activate.
http://jsfiddle.net/MrPickle/ace1rtrq/
Here's an example the behavior that I'm seeing (with the same css code I'm using for layout). If you play with the size of the result panel, you can see what I'm talking about.
I know that I could use javascript to monitor the width of the page and add or remove a .left class to the inner element as needed, but I don't think that's the most elegant solution possible. Has anyone ever run into this kind of an issue?
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
I have a continuous form with many control elements ordered in two columns. The form is opened with the WindowMode 'acDialog'.
When I take a look at this form at my desktop computer there is no problem. But I want to use the application also on my laptop. When I open the form on my laptop, I only see the first entries, but not the others anymore. Unfortunately I havent found an opportunity to use scrollbars in my form.
What I have found is this (did not work):
Add or remove scrollbars
Edit:
The View should look like:
but on my laptop it looks like:
So I want to have scrollbars. The scrollbar property is set to both directions.
Edit 20121126, the design view. The blue part is header, the txts are in the detail view and the buttons are in the footer:
This problem has stumped me before. Access is not smart enough to realize if the screen is set to a different 'zoom' than 100%. So Access is thinking that the entire form is on your screen when really it is not.
This really only applies if you have Windows 7 and maybe 8, but I have no idea about that. If you go to your display property (right click the desktop and select 'Personalize' then Display in the lower left-hand corner of the pop-up.)
If you are not set at 100% then access is missing 25-50% of your screen. access goes off of pixels, which is set in the resloution, but when using 125% Windows expands everything by 25% and that can push things right off the screen. The form does not need scroll bars to fit on your screen, just need to set your zoom to 100%.
I found this out by having a 'control bar' set to be x-250 pixels from the left (where x is total left to right pixels). However one computer could never see the control bar and it was because the screen was +125%. I have never been able to figure out how to get the current 'zoom' from Windows. I have searched through all manner of API's. I hope this is the solution you were looking for! Good Luck!!
I'm building an editor where the content of a post is loaded in a div, and jQuery selectors allow me to edit the content inline.
I just ran into a bit of a hurdle as I was trying to add some responsiveness to the styling of the templates:
in my template stylesheets, I use a specific id of the preview area to specify where the style should apply. I apply the same id to the body tag of the viewing of the post so that both the preview in the editor and the full view of the post look the same.
I was putting in some media queries on the view side of things and realized that on the preview page, something like #media screen and (max-width: 640px) will behave differently because the preview does not take up the entire width of the screen.
Is there a way I can use a media query selector other than the width of the screen, but instead the width of an element.. or something equivalent?
Or could there be another way of mimicking that behaviour simply with javascript..
Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...
Update (2018):
This is still a common problem for many developers. There is no way without javascript to query the size of an element. It's also very difficult to implement in CSS because of the 'cyclic dependencies' it causes (element relies on another to determine its size, element query causes size change in child which causes size change in parent which causes size change in child ETC...)
There is a great summary of the current element query landscape.
The go-to solution these days is the EQCss library https://github.com/eqcss/eqcss, or handling the changes within a javascript framework like React or Vue using a "CSSinJS" type solution.
My old and hilariously janky "solution":
For now I am using:
.preview {
zoom: .8;
-moz-transform: scale(0.8);}
when the .preview div is 80% of the page width. It's generally working, but with a few issues, and it is not entirely flexible since the divs in question will not always be set % of the page width.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.