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
Related
Hi HTML and CSS gurus, I am trying to prepare a website for myself and got stuck in aligning texts. Need some help on it.
I have attached 2 screenshots
Desktop View:
[]
Mobile View
On Desktop View (Image 1)
The blue colored background is a png image (made in photoshop) with a dimension of 400 x 603 px. The black color background on the left or the red color background on the up are coded in HTML. I want the whole paragraph ("Many unit rent....gone by then") to be aligned in the middle of the blue background (from top where it is at present). How to code it dynamically so that whatever the screen size is the text remains in the middle?
I want the paragraph to have a 50 px gapping from both sides of the blue background. How to achieve it?
On Mobile View (Image 2)
Whenever I try to resize my browser in mobile view and see the same paragraph it is shifting its base and going outside the blue box whereas it should be in the middle.
I have written the HTML and CSS code as:
HTML:
<div class="caption">
<h3>Michael Corbett, who hosts NBC EXTRA’s ‘Mansions and Millionaires’ has observed:</h3>
</div>
<div class="img-cont fullh">
<img src="img/background.png"/>
<p id="text">Many units rent immediately, so it's kind of foolish to wait till the weekend just to get a peek; Chances are, it will be gone by then.</p>
</div>
CSS:
#text
{
z-index:100;
position:absolute;
color:white;
font-size:1.5em;
font-weight:regular;
left:50px;
top:50px;
width:80%;
}
Am I missing something?
I think You should add Position relative to your upper div for solve this problem. you are not showing your full html or css thats why I am not sure this is right or wrong.
.img-cont.fullh {
max-width: 100%;
position: relative;
}
I have a div in my non-responsive site which contains an ad with 120x600 pixels. I want to make the div float always at the right of the screen. For desktop or large devices it is ok But When in the Smaller device then as the site is non responsive so when site loads the div become very small. If the site would responsive then in a device of width about 400px it would cover almost all the portions of the screen. I need to do that in my non-responsive site. This is for the ads higher click through rate. A example div is -
<div id="float_rightad" style="position:fixed; top:15%; right:0;width: 160px; height:600px; z-index:5000;">
<div style="position:absolute; left:-5px; margin-top:0px; z-index:15;">
<a href="Javascript:void(0);" onclick="document.getElementById('float_rightad').style.display='none'"><img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img>
</a>
</div>
<div>
<script data-cfasync="false" type="text/javascript" src="//www.sparkadsmedia.com/adscript/120x600_english.js"></script>
</div>
</div>
How can i do that in my site?
You can probably achieve it by putting additional CSS3 statement in a style block like the following and also use a relative width (%) for your ads (wherever is possible):
<style type="text/css">
#media screen and (orientation: landscape ) and (max-width:400px ) {#float_rightad { YOUR STYLE PERTINENT TO SMALL SCREEN}}
#media screen and (orientation: portrait ) and (max-width:400px ) {#float_rightad { YOUR STYLE PERTINENT TO SMALL SCREEN}}
</style>
If your add contains the img element, then you can specify the image width relative (in %) to the container div; otherwise, consider using iframe element.
Hope this may help.
Best regards,
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'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
First time user, with a simple but frustrating problem.
I am a new web coder, designing my website (austinwoehrle.net)
I am trying to make the banner of Seattle scale with my darker background, but if I zoom in, it breaks out of the div.
On smaller monitors the image will be too large to fit in the darker background.
I have already set the width to 100% and have tried a lot of trouble shooting!
Thanks for the help!
Again, my website is http://www.austinwoehrle.net/homepage.html
At the moment you have this:
<div id="seattle" alt="test">
<img src="seattle.jpg" width="620" height="210">
</div>
Change the width of your image to width="100%". This may then be slightly wider than you want it, so you will want to add margin or padding to the containing seattle div on line 126 of mystyle.css
width:80%;
margin:0 10%;
Then alter your image to have a width of 100% and remove the height.
<img src="seattle.jpg" width="100%">
Notes
margin:0 10%;
//is equal to writing
margin-top:0;
margin-right:10%;
margin-bottom:0;
margin-left:10%;
Check out this site for information on how to write this.