Problem: I developed a single page website with Reactjs and deployed it to Heroku (It is a remake of an existing website. I want to include it as a part of my portfolio for entry-level web dev job). When inspecting on Chrome Toggle device toolbar, the responsive website worked fine in stimulated mobile and ipad. When opening the site in my iPhone7 Plus, it also worked fine. But when opening in a real iPad, several section elements did not position as expected - they overlapped.
The affected elements are child elements of a container element which has CSS style overflow: auto. display: flex, flex-direction: column. The effect I want to achieve is that all the main contents (except navigation menu, footer and sidebar) are included in a scroll-able container.
Screenshot of the website in ipad browser
I spent some time trying to search for answer on the Internet but did not get any luck.
Question: How to make the responsive website works properly in iPad devices?
After multiple trials and searches on Stackoverflow, I finally found out the solution.
I came across a stackoverflow question and noticed the similarity of my problem. In the case of my project, the container element's styles include overflow: auto, display: flex, flex-direction: column. For some reason (I still do not understand the theory behind this), when the web app is opened in an iPad browser, the container's child elements (flex items) shrink automatically. That is why child elements overlapped with each other. To solve this, I set CSS style flex-shrink: 0 for each child element. Now the app works properly in iPad.
The link to the other stackoverflow question is as follows:
flex items overlapping in Safari (iPad)
Related
I am having a weird problem with #font-face and svg images specifically on the Samsung Internet Browser on a webpage I am developing. It has some pretty strange issues.
Part 1: The font-face problem.
I am using 2 font-faces. For some reason in the footer area they load perfectly fine. But in other parts of the document they don't. Example:
Image of footer area
On this image, the blockquote is displayed with the correct font, below that the Follow Us part uses the second font-face and it displays correctly too. The About Us heading uses the same font-face as the blockquote element but it doesn't display correctly. Now, the second image:
Image of header area
The problem here is that the About Us huge heading uses the same font as the Follow us text in the footer area (visible in image 1), but it's not displaying correctly.
Part 2: The SVG image problem
In the Image of header area if you focus on the upper border of the text container below About Us you can see that there's a very deformed SVG logo that says Petit Délice. If I open the image in a new tab it displays correctly, but inside the page it doesn't. I was thinking of using png substitution for browsers without svg support but from what I can see it wouldn't be of use in this case as the browser does support SVG.
Now, these two issues only occur in that specific browser and from what I've been able to check it happens in Android 4.2 and 4.4 on Samsung phones.
The site works perfectly fine on Chrome (both Android and iOS), Firefox and on Safari, but the customer has a Samsung phone and for some reason uses the s*itty browser it has by default which is causing me severe headaches.
You can check the site on this link
So I really hate the way chrome extension development works so I decided to make a regular webapp and use an iframe in my extension. Everything works fine, except for the dimensions of the website and the scrolling on the extension/site.
When developing the site, I knew I was going to use an iframe so I used percentages when formatting the site, for the most part I used 100% on most divs and textboxes. Anyway, the problem I am facing is that the scroll is extremely wonky on the extension for instance this is a picture of my extension with 400px height:
400x400. Everything looks fine.
and here is my extension with 800px height:
400x800. Scroll appears.
Why is the scroll appearing if I am merely making the extension longer? It doesn't make sense to me.
Any idea why this is happening?
There is a limit on the size of the popup window. I don't know the exact dimensions though.
You cannot increase the size of the document past it, scroll will appear.
I know this type of question has been asked many times before but I haven't found an answer to my specific issue yet so I thought i would post.
It's really a bit of a quirk I guess rather than anything else but I have designed a responsive site that resizes nicely in a browser when you resize the window and works perfectly when you load it up in either portrait or landscape on a mobile. However when you load it in portrait and then turn the mobile into landscape some mobile browsers don't load up the correct styling for the new screen size - BUT IT DOESN'T HAPPEN LIKE THIS FOR ALL BROWSERS! So far I have tested it on an Android 4.0.4 version phone using the standard Android browser and it resizes correctly when switching orientations but then on the same phone using google chrome as the browser it applies different styling BUT if you refresh the page it then applies the correct styling.
So my question is how can I force the mobile browser to render the page correctly on orientation change without having to reload the page?
The site in question is www.the-baobab.co.uk and im using the viewport meta tag and setting it to width=device-width and an initial scale of 1 then calling media queries at certain max pixel widths to alter positioning and layout for various different screen sizes which can be seen in my stylesheet1.css here
I found strange problem. I used this basic example of google maps. This maps works on all browsers except on default browser in my Samsung GalaxyTab (Honecomb 3.1). In this browser there are hidden controls. Or controls have bad z-index. If I move with map, I can see them for a while. There is no problem in default browser in Android 2.3, in Firefox on tablet, or any other browsers. Does anyone have solution for it?
Thanks!
I discovered this bug today as well, but I'm trying to get an element float on top of a google maps element. I found a fix at: https://github.com/CloudMade/Leaflet/issues/335 and that is to add:
.gmnoprint {
-webkit-transform: translate3d(0,0,0);
}
This forces the element to be on top, for some really odd reason. The line above works for the built in zoom controls etc on my Samsung Galaxy Tab 10.1 and can of course be applied to all elements that should be on top.
I tested my site on a mobile device and it loaded pretty quickly. However i had to scroll right to see all of the text. The text was pretty big as well.
How can i redesign my site so i dont need to do any scrolling and have smaller text? I know i I seen this before but i cant remember what site did it.
i removed my css and the device scrolled right until the end of my largest div. So i need css to solve this? What css do i need to make the text not big and not cause the user to scroll (horz) no matter how small his screen is?
Also do i detect the user agent in .NET and link an alternative css file or do i detect which css to use elsewhere?
yes you should design an own css-file for the mobile version of your website. either you check the useragent if it's a handheld or you work with the css media type handheld (which is not supported by older browsers) to load the different css-file.
edit:
with css you can also replace images with text