I have a pop-up layer with a contact form that shows when a user clicks on the "Contact" button. The layer is coded something like this:
<div id="form-overlay">
<div class="form-layer">
<h2>Fill This Form</h2>
<form>
......Form fields, Text.....
</form>
</div>
</div>
And the associated style definitions are:
#form-overlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.7);z-index:100;display:none}
#media (max-width: 750px), (max-height: 650px) {
#form-overlay {position: absolute}
}
.form-layer {position:relative;background-color:#eeeeee;width:90%;max-width:750px;z-index: 102;margin:20px auto;color:#333;padding:20px;font-weight:300}
The problem is that in some languages (German, Dutch especially) the text is much longer, taking up multiple lines, and pushes the Submit button below the fold, especially on smaller laptops.
When users try to scroll, the background scrolls, but the fixed position doesn't allow the form to scroll. This isn't ideal, of course, as users can't submit the form then.
If I don't make the form fixed, when users scroll down, the dark grey overlay ends at the screen height and then that looks odd.
Question: How can I fix this problem?
Just try to add 'overflow:auto' on #form-overlay block. It could help )
Hide 'overflow: hidden;' on background and enable 'overflow: auto;' on foreground.
Related
I would like to hide two buttons, which I have achieved using transparent.
I've also managed to hide them behind two hand written words in a picture, post and search. The problem is that when it comes to desktop, different screen sizes, mobile/tablet, different screen sizes/browsers, operating systems etc, the buttons don't match the text, being either too high or too low, depending on device etc.
It works if I set one place for mobile and one for desktop, but as soon as anything changes like screen size, the text and buttons mis-match so that the picture text becomes unclickable. It's the effect I'm trying to achieve which is like the user is clicking on handwriting when in fact it's just a hidden button on the image.
Also tried to cut the buttons out of the image and use background: url but it didn't work and just cropped the image in the wrong place, hiding the word.
The only solution I can think of is if there is some way of telling the browser not to move the image regardless of screen size etc.
.btn.btn:hover {color: transparent! important; background:
transparent! important; border: none! important;}
btn.btn:active {color: transparent! important; background:
transparent! important; border: none! important; box-
shadow:none;}
.btn.btn {color: transparent! important; background:
transparent! important; border: none! important;}
Html
<div id="content" class="main-container">
<section class="content-area pt0 ">
<div id="main" class="" role="main">
<div id="shapely_home_parallax-3" class="widget
shapely_home_parallax"><section class="cover fullscreen
image-bg"><div class="parallax-window fullscreen" data-
parallax="scroll" data-image-src="https://adsler.co.uk
/wp-
content/uploads/2019/07/IMG_20190706_112754.jpg"
data-ios-fix="true" data-over-scroll-fix="true" data-android-
fix="true"><div class="align-transform"><div class="row">
<div class="top-parallax-section"><div class="col-md-8
col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
<div class="mb32"></div><a class="btn btn-lg btn-white"
href="https://adsler.co.uk/wp-user-test-dashboard-2.
2/awpcp-place-ad/">Post</a><a class="btn btn-lg btn-
filled" href="https://adsler.co.uk/search.
adsler/">Search</a>
</div></div><!--end of row--></div>
</div></div></section><div class="clearfix"></div>
</div>
</div><!-- #main -->
</section><!-- section -->
Just so you can get more of a sense of what is meant, the page is: https://adsler.co.uk
You can try to play with display: none and display: block tag arguments for your divs. This probably will require using JavaScript to change the property your your buttons. Something along the lines of when the first button is clicked it's display style is changed to none, and when the second one is clicked the first one's style is changed to block. onclick = "myFunction();" should do the trick. https://www.w3schools.com/js/js_functions.asp for reference on JS functions
It's the effect I'm trying to achieve which is like the user is clicking on handwriting when in fact it's just a hidden button on the image.
A much more effective way of achieving this effect will be to use an HTML image map. Using an image map will allow you to create arbitrarily shaped regions on an image that can be clicked like links.
I have a website that works fine normally but when in mobile mode, all the links (with exception of the navigation) are no longer clickable. Does anybody know how to change this? I'm not too familiar with Bootstrap though I've tried to troubleshoot as much as I can.
Here's the website: http://dominiquehall.com/dom/
Thank you in advance if anybody can help.
Remove the following code from your theme css file (agency.min.css) at line 477:
div {
height: 100%;
}
Or you can override that property by adding the following code in your custom css file:
div{
height: auto !important;
}
The problem in your code is with the property of div having height 100%, thus overlaying all the links. The div containing the image of a person playing guitar is covering the links in mobile mode. The images are hidden but the div still exist.
Another hack is hiding that particular div in mobile mode.
#media screen and (max-width:991px)
{
.target_div{
display: none:
}
}
In your case the target div is:
<div class="col-lg-4 col-md-5">
<div class="fixed">
<img src="./img/dom1.jpg" id="photo" class="hidden-sm hidden-xs" alt="">
View Resume
Equipment List
</div>
</div>
Just add a class name to the above div and a display as none for mobile devices and your site is good to go.
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'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
I want to construct a timeline that has horizontal scrolling.
I have a wrapper DIV, inside it has months. Each month is a DIV inline-block. This works:
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
This almost works, but because my clients site uses tables for layout the scroll bars don't work. This fails:
<table><tr><td>
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
</td></tr></table>
Here is a jsfiddle to show what I mean: http://jsfiddle.net/fhL9u/2/
NOTE: The top timeline example works as you resize the browser. It is 100% width of the page (or containing element.)
How do i make the second timeline overflow correctly? It must take up the remaining width of the screen (no with: 100px hacks), and if possible only show scroll bars when the months overflow.
This is an internal application so I can tell people to use Firefox or Chrome if I need to. This means I can use advanced CSS3 stuff or browser specific ( -webkit or -moz ) stuff. I'd prefer that it was IE8 compatable (just for my own curiosity)
If you can fix the width of that text (in pixels or percents) use this solution:
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 100px; /* or width: 15%; */
}
Note that you can use a different selector for the text (like a class)
Possible solution....
The main issue may be that the "Site Navigation" cell is part of the scroll area.
table { display: block; }
Then assign the .wrap class to the table and remove the div encompassing the months.
Fiddle here
only tested in Chrome.
You could just put a width on the div.wrap, say 400px- that works and is just one line of code:-)