I need to make a classic full screen landing page with a h1 title, a h2 sub-title and a call-to-action button to slide the content to the first div of the website. I really hope you can help me because the website should go online soon and this is the one thing that's stopping me from saying it's finished, I'll try to tell you everything so you have a better understanding on what's going on.
Here's my Fiddle: jsfiddle.net/daghene/szp7yf7h/1/
And this is an online version of the real page with the first bit of
content below it http://andreacordioli.com/macwip2
I'm using Skeleton Framework and the div containing the fullscreen image is outside the .container who's wrapping the grid, while the h1, h2 and button are inside it. Right now I have two problems:
for some reason, only in this part of the website, text bigger than a certain point exceeds the page width making the website scrollable horizontally under a certain point
I made it so the text gets smaller under the 550px mark which is where the Skeleton grid comes into play. I tested it on my Motorola Moto X which has around 1280x720 resolution and noticed if I check the website in landscape it doesn't trigger the smaller resolution text propieties and the text exceeds the width of the windo again: this happens on iPhones in Chrome tester too
What I wonder right now is: as of today, what's the best practise to make a 100% responsive landing page with such simple content that is always centered, works on all possible resolutions and device orientations withou exceeding borders and has the text always at a decent size never being too big?
For instance, the text exceeding the width is 8rem which equals to 80px in Skeleton. Here's the page I'm trying to achieve, which I'll need to serve a different image for on mobile when aspect ratio is X:Y where Y gets bigger than X somehow:
If you try it it kinda works and I even tested it on my old, first Samsung Galaxy Tab which has the super old Android 2 or 3 browser which gives me more problems than IE but actually centers everything correctly with this code...but the main issue is that the text isn't scaling properly and if the window is too narrow it either disappears on the right, making the window scrollable on the right and part of the big title unreadable, or if it gets too small(say my 1280x720 4,7" Moto X) the call to action button disappears since the screen window is too short and there's the browser bar too. I put overflow: hidden to this windows to be sure there's no horizontal scroll but the real problem is not the scroll, it's the text exceeding the div instead of getting smaller.
LAST NOTES!
If you check the css there's a "-1rem margin" on the H1 because as I
said for some reason in this specific section the H1, and just that,
doesn't center. The H2 and Button are centered, the H1 is not and
only here...don't get why.
If you try to make the window horizontally smaller you can see the text touches the window on the right side first(both in the Fiddle and in the other link where there's no html and body margins), still can't get why and I feel that's what's preventing the text to stay centered while getting smaller.
It looks to me that some of the problems you describe are because at viewport 550px wide, your h1 font jumps in size from 5rem to 8rem. But at this viewport size there isn't enough horizontal space to hold your h1 text and so it exceeds the width of its parent div, and hence appears to be off-centre.
I think a solution would be to tweak your CSS in http://andreacordioli.com/macwip2/css/includes.css starting around line 1047 to something like the following:
#media (max-width: 625px) {
.bigImage h1 {
font-size: 5rem;
}
...
}
Hope this helps!
Related
I have applied tour-step-backdrop="true". It applies to only some part of screen not entire screen.
As you can see the bottom part of image is not covered. So if i wanted to cover full screen then how to do it?
I have a teeny-tiny page deployed # http://pinkbook.s3-website-us-west-2.amazonaws.com/
I am exercising my responsive design, I'm using flexbox with a few components from Material-UI, which are designed with display: block for the most part.
When clicking on the input fields for email or password, on mobile, the keyboard pops up and causes the content and layout to be distorted. The 100% height of HTML/Body no longer seems consistent, and some of my buttons that have margin rules in place now escape their container and bleed into whitespace that isn't covered in HTML/Body.
Please glance at that URL and either take a look from a mobile browser, or open your inspector and look at the bottom of the page -- there are distinct white areas and mispositioned buttons. How would one adjust the CSS to avoid the whitespace and content misalignment when an input field is focused and the keyboard presents itself?
I'm porting chrome extension to Firefox and I'm testing on Nightly 51a.. version.
When I click the popup options icons it opens and scrollbars appear and after half a second those disappear.
How to correct this?
At the moment I've given a hyperlink in the top in the optins popup with this code which when clicked opens full view html in a new tab and this works just fine:
<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>
The popup that is being shown for a browser_action is, currently, being set to a maximum of 800x600 pixels (at least in my testing). However, your content is being rendered at a much larger size while having the scroll bars not shown to the user (either not rendered at all, or positioned outside of the view into the document provided by the panel).
There are multiple ways to solve this. However, I was not able to find one that did not result in specifying an explicit height and width for the <body>, or a sub element (e.g. a <div> enclosing all content). Several ways showed the scroll bars, but left them disabled.
The simplest way to get the scroll bars to show up, is to change your HTML from:
<body>
to:
<body style="height:580px;width:800px;">
Obviously, you could also change this in your CSS (banks/options.css). From:
body{
min-width:500px;
min-height: 500px;
}
To:
body{
height: 580px;
width: 800px;
min-width: 500px;
min-height: 500px;
}
However, neither of those allow for the possibility that the panel will be shown with different dimensions (e.g. on other sized screens, or if Firefox changes what it is doing).
Thus, my prefered solution is to use JavaScript. In options.js add something like:
function setBodyHeightWidth(){
let width=window.innerWidth;
let height=window.innerHeight;
height -= 20; //Adjust for Save button and horizontal scroll bar
//document.body.style.width=width; //Does not work
//document.body.style.height=height; //Does not work
document.body.setAttribute('style','height:' + height + 'px;width:' + width + 'px;');
}
function onDOMLoaded(){
setBodyHeightWidth();
//Anything else you need to do here.
}
document.addEventListener('DOMContentLoaded', onDOMLoaded);
Using a significantly trimmed down version of the code for your extension (i.e. I removed all your JavaScript, and most of the non-visible HTML), the above code makes it look like:
Sencha Touch 2.4 has this new toast class(Ext.Toast), which looks nice. But, by default, the location of the toast is centered in the viewport. Is there any way I can push it towards the bottom?
I looked at the top config, but it doesn't work well. (Pushes it down, but it's not centered horizontally now).
Tried a combination of top and left configs, but it's not perfect. I don't seem to find any hints in the docs.
Basically, I need to display the toast around of 70% of the height, and it should be centered horizontally in the viewport.
Not ideal but the following css will do it. Just change the number depending on high high you want it.
.x-toast {
top: -150px;
}
I've created a plugin that can create toast messages similar to Android style at the bottom of the screen.
I've also faced this problem I found the solution.You can also find it by the below link.
sample toast with different position and animation
My website content loads further down the page than expected on initial load.
The name and other content appear in the middle of the page, instead of the top.
If I grab the browser corner, and resize the window - even slightly - the content pops back to the top of the page.
I'm unsure of what's causing this.
I've tested on Chrome/Safari/FF on Mac Desktop
The response is normal on a tablet or smartphone
The page is at http://www.mac-works.com/dev/MG/mark3
Notice on first load, Michael's name is in the middle of the page, but if you grab the lower corner and move - everything pops to the top where it's supposed to be
I'm aware there are a number of other posts about responsive content, I've reviewed more than 20, but none seem to address the content not loading properly on first load, but correcting when the browser is resized.
It turns out it was the var marg_top = Math.abs function. Intially set to /2 - I changed it to /8 moved the content up towards the top.
So, if you're using floating content with javascript - make sure you're familiar with the math.abs function.
Math.abs in javascript
http://www.tutorialspoint.com/javascript/math_abs.htm