I've got a logo on top of a page which has to be centered relative to the text and fixed to the top of the viewport like in this example: http://dev.markbrouwers.nl/test.html
<h1 style="width: 200px; height: 100px; margin: 0 auto;">
<img src="images/logoforeground.png" style="position: fixed; display: block;" alt="Page title">
</h1>
<div style="width: 800px; margin: 0 auto;">
<p>content</p>
</div>
It works perfectly on pc's. Yet on mobile browsers when zooming the logo starts drifting away from the center.
I've read quite some things (e.g. this) about position fixed on iOS and apparently as of iOS 5 and Android 2.2 it should work, thought it doesn't... it still drifts... Does anyone know how to make mobile webkit behave like the pc browsers?
[edit]
I edited the html a bit, h1 is now outside the container
I also made a screenshot on an iPhone and Windows. As you can see the logo drifts off the viewport when you zoom in on iOS. In chrome browser it stays in the top middle of the viewport.
Safari/iOS5 screenshot:
Chrome/Win7 screenshot:
The Reason this happens, is mobile devices need to know the width of the page, even if the width of your page is 340px for e.g you will still run into this issue, it is because your ZOOMING, not resizing.
If you want text to be larger of the user, the best solution is have something like the following:
Two buttons Small / Large
then link those buttons to some javascript that then changes the text size based on what you want.
for e.g. when click large you might want it to go to 24px
and when they click small it goes to 14px.
It is simple javascript
Related
I've added an image to the home page of my website, and it all looks good on my big screen, however, when I go to view the website from a smaller laptop, it doesn't show the image. Any tips on how to make the website more responsive, so that this image appears on all devices? (or just on the web, not too bothered about mobile)
This is the code I've used to add the image:
<h2 class="main-heading no-margin"/>
<section class="home-welcome text-center padding show-for-medium" style="padding-left: 0 !important; padding-right: 0 !important; padding-top: 0!important;">
<img src="https://i.ibb.co/KyhxHP0/Screenshot-2022-05-10-at-12-04-57.jpg" style="width: 100%;"/>
</section>
This is what I'd like the website to look like (and it does on my big mac screen):
This is what it currently looks like on a smaller screen:
I have the following HTML :
<div class="form-group" style="margin-left: 7%;" id="gCaptcha">
#Html.Recaptcha("MyKey", CaptchaTheme.Dark)
#Html.ValidationMessage("ReCaptcha")
</div>
As you can see I have specified margin-left:7% reason behind this is because I want it to appear in the middle instead of floating to the left as shown here:
this works fine on desktop / tablets but when viewed on a mobile device its pushed further to the right because of the margin-left:7% i have specified, now to fix this I assumed I could of put margin-left:auto; margin-right:auto but that doesn't do anything, can anyone suggest a way that will make this captcha appear in the middle for all devices?
Hello there try this in your #media for phones:
Important inline-styles will overwrite any other css
remove style="margin-left: 7%;"
#gCaptcha{
margin: 0 auto;
width: 85%;
}
If this doesn't work please provide the CSS for .form-group
I have this webpage where there is an image on top and paragraphs on its right and bottom. This is the CSS I am using (sorry the CSS is directly in the HTML, I have to do this)
<div style="float:left" class='wrapper'>
<img border="0" src="images/about.png" style="float:left;margin-right:2em;margin-bottom:2em">
<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>
<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>
</div>
It seems to work fine even in mobiles. But I wanted to see the image centered at the top of the page when it's displayed in a mobile or tablet (smaller screens). Currently the image is close to the left side of the page when I open the website in a mobile. I wanted it aligned to the center of the page.
The picture below shows how I wanted it to be displayed in large screens and in mobiles (note that this is not exactly what happening now. the second image is what I want to achieve, but at the moment the image is closer to the left margin, and not aligned to the center)
Oh, and I can only use CSS. Is it possible?
Thank you all!
You will need to use media queries in a CSS file.
This will add properties for screens with a width lower than 640px for example.
#media screen and (max-width:640px){
img{
float:none !important;
display:block;
margin-left:auto !important;
margin-right:auto !important;
}
}
However you have to to remove float:left from the HTML and put it in a css file, otherwise the inline-style will override the media query
If you really can't modify the HTML. You should write float:none !important; in the media query write but it's a bad pratice to use !important
Update
Live example http://jsfiddle.net/7d3Lv/2/
Try resizing the Result box
I am trying to align two links under an image as text, the HTML I got works perfect in Chrome and Firefox, however not in IE where 90% of our internal users are.
here is the code..
<div style="float: right;"><img src="sites/default/files/recog.png" width="419" height="465" style="border: 6px double #7a9a01;" /><br />
<p style="text-align: right;">Click to Nominate Online!</p>
<p style="text-align: right;">Print your nomination form here.</p>
</div>
<h2>"A World of Thanks!" program</h2>
<p>The “World of Thanks!” program is a collection of...</p>
In Chrome the above HTML shows the text and content on the left, and the image will show up on the right, with the link text underneath the image to the right.
In IE, the links show up first on the left, then the text, the image shows on the right as it should.. but somehow in IE the links are not going under the image instead they are going left of it.
Any idea? what am I doing wrong?
wrong in IE.. https://oppy.com/it/ie_broken.png
correct in Chrome.. https://oppy.com/it/correct_chrome_only.png
I don't have IE to test, but try setting a fixed width for the div.
<div style="float: right; width: 431px;">
a tags are naturally inline-block trying setting your a to display: block; Same with image tags. target the image in your css and add display: block; to that as well
I dont have IE but try this:
JSFIDDLE
I have a web page with questions on it. I want the user to be able to use a 7" Android tablet (with Chrome) to answer the questions. Some people will want to zoom. Some will not.
How can I get the div container to resize (wrapping the text inside the borders of the screen) when the user zooms in or out? I tried this:
.resizcontainer {
width: 90%;
background: #CEE;
margin: 0 auto; /* the auto value on the sides, */
}
with the top of the code as this:
<body>
<div class="resizcontainer" style="border: thin black solid">
<div class="header">
<h2>Risk Assessment Test</h2>
</div>
<div class="content">
I'm not sure if it matters, but Chrome on the desktop does the job just fine. The container resizes just fine. Or is it because this is a form???