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.
Related
I've searched the existing questions and found some similar issues, but the suggestions there didn't solve my problem.
Here is the issue:
We are using the Visual Editor plugin for Wordpress. My boss wanted this plugin to be used for a special promotion area in the header - he wants to display images that are clickable or have a button. I wrote some custom CSS so this plugin will do that. The issue, as you know, is you can't make a link in CSS. So for the background image, I needed a button. However in this particular case there was so much text on the image, a button would not work.
So, I wrote an ID that I could call in HTML. I made a link, called the ID, and then inside the ID I put a text indent that would push the text off the page and the image would be clickable.
The issue here is that for some reason the image would not fully load. It was cutting off height-wise. I had set width: 100%; and height: auto;, but neither of those things worked.
So, I ended up simply inserting the IMG normally, and linking it normally, but now the problem is I need it to be responsive.
I wrote a class called .responsive-image and made the width: 100%; and height: auto; but this still doesn't work.
Do I need to put the responsive image information elsewhere? Do I need to write some other class? I'm at a loss and have looked at this too long at this point.
You can see this header widget right here - 100daysofrealfood.com/carrot-top-almond-pesto-sustainable-almond-recipes/
And if you inspect you can see what I mean about it not being responsive.
Here's what I've written to insert it into the widget:
<div class="days100-background-header-widget"><div class="responsive-image"><a
href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
I have the class in there two places. Maybe that's the issue?
Here's the CSS for the main header widget class:
.days100-background-header-widget{
display: flex;
align-items: center;
justify-content: center;
}
Any feedback is really appreciated. Thanks for reading this super long question!!
The problem is not on the image itself, but on the parent <div> with the class of .days100-background-header-widget. It is set to display: flex so that div is not 100%.
If you want to center things on the screen you can use margin: 0 auto on a block element.
.days100-background-header-widget{
display: block;
margin: 0 auto;
}
.responsive-image {
width: 100%;
height: auto;
}
<div class="days100-background-header-widget">
<div class="responsive-image">
<a href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
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'll try to keep this as succinct as possible...
I have a image that I had setup to fill it's parent div horizontally and scroll vertically.
I've since added a jQuery based scrollbar to replace the native scrollbar for non webkit browsers. Since doing so, my image is overflowing it's parent horizontally in Firefox. Chrome and IE are not having the issue.
It's a little convoluted because I'm using skelJS to set container sizes based on breakpoints, but I don't think that should make a difference. The parent and child containers along with the image have width's set.
I'm going to post the HTML and CSS first and see if there's something obvious I'm overlooking. The jQuery targets the .scroll-pane2 class and is working fine beyond my overflow problem. I'm happy to post that code if there isn't something obvious that I'm missing.
Thanks in advance for the help!
A summary of the code:
HTML:
<div class="8u tasting-menu">
<header>
<div class="scroll-pane2">
<p>Scroll or click for full-size menu</p>
<img src="images/bwh-tasting-list-png.png" class=""/>
</div>
</header>
</div>
CSS:
body {
width:100%;
}
img {
width:100%;
height:auto;
}
.8u {
width:66.6%;
height:auto;}
.scroll-pane2 {
height:27em;
width:100%;
overflow:hidden;
}
.tasting-menu img {
width:98%;
height:auto;
}
The jQuery based skelton I'm using accounts for the .8u. I've used it quite regularly and never had the issue, but I'll definitely take another look at it.
I tried the overflow-x:hidden to no avail. The jQuery scrollbar I'm using overrides the overflow in the scroll-pane2 class.
I need to relook at the scroll bar script I'm using... because before installation, it worked fine, albeit with the Firefox native scrollbars.
I'll try to put a jsfiddle together.
I have a page I am setting up so that it looks the image below on the widest resolution, however on smaller resolutions the page setup will change what images are being displayed on screen, so I wanted to use a media query and data attribute. Only problem is:
I am not sure if I am using the data attribute correctly, and
I have no idea how I would target the <p> tags with a selector so I can use :after to display the image of the badges after the text.
This cant use any jquery/jscript as a requirement so it's kind of a pain.
Demo, it should be configured properly with bootstrap. (The image is linked correctly, but not being displayed due to the attr.)
Sample HTML:
<div id="main" class=" container">
<div class="row">
<div class ="col-lg-6 " id="badgeBox">
<div class ="col-lg-12" data-test="<a href='http://www.va.gov/' target='_blank'><div class='badgeContainer'><img id='va_badge' class =' badges img-responsive' src='http://i.imgur.com/BAbUq6v.jpg'alt='Veteran Affairs Badge'></a></div>"> </div>
<span><p> U.S. Department of Veteran's Affairs</p></span>
</div>
</div>
</div>
Sample CSS:
.badgeContainer {
width: 30%;
}
#media screen and (min-width: 1200px) {
//some selector that targets the p tag// :after {
content:"("attr(data-test) ")";
}
}
I think setting content from a data attribute would work like this.. However, the data-test needs to be inside the p and you'll have the larger problem of encoding the HTML content inside data-test..
#media screen and (min-width: 1200px) {
p:after {
content: attr(data-test);
}
}
A more Bootstrap friendly approach would be to use the included utility classes (http://getbootstrap.com/css/#responsive-utilities) to only show the image link at larger resolutions use visible-lg.
Here's a demo with both approaches: http://bootply.com/94916
I want to allow mobile site users to swipe/scroll through a list of icons.
The icons are div tags containing img tags.
The user should be able to swipe the container, scrolling/sliding the elements left or right.
The images need to slide smoothly with acceleration and deceleration.
Needs to work on iOS and Android.
We needed something like this sometime back, so I made a demo for it at that time. It's pretty basic, but it'll lay up all the ground work you need. First, lets start with the markup :
Markup
Since you mentioned jQM in the tag section of your question, Im gonna go with jQM [data-role=page] markup. You'd have a structure like this :
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Slideshow</h1>
</div>
<div data-role="content">
<div class="images">
<!--your images here -->
</div>
</div>
</div>
So you'd put all your images in the div with class=images. A particular group of images were encapsulated within a tags like this :
<a href="#">
<img src="25AC.jpg" />
</a>
<a href="#">
<img src="nature.jpg" />
</a>
<!--so on-->
You'd place this inside div.images. So that's about the markup we have.
CSS
The stylesheet part is simple.
.images {
height : 280px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color : #272722;
}
.images a{
padding : 14px 5px 0px 5px;
margin: 5px 3px 0px 3px;
vertical-align: middle;
display: inline-block;
}
images img {
max-width: 100%;
max-height:512px;
}
Important properties to note here :
The overflow-x, overflow-y properties : The former needs to be enabled and the latter needs to be disabled. Only then the scroll will happen when you swipe right or left.
The white-space property : This is important to make the images come in a straight horizontal layout.
The max-width property : This is for scaling the images on mobile.
That's it! You're done!
Extras
I just added a popup to show the image when its tapped so that I'd be able to demonstrate the event handling. Here's the popup :
<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="b" data-corners="false">
Close
<div id="stuff"></div>
</div>
I'd be putting the image inside div#stuff when the a surrounding the img is clicked. Here's the JS :
//pageinit event of page
$(document).on("pageinit", "[data-role=page]", function() {
//cache popup for future use
var $popup = $("#popupInfo");
//click event for "a" tag inside .images
$(this).on("click", ".images > a[href=#]", function(e) {
//prevent default action
e.preventDefault();
//clone the image inside "a"
var $img = $(this).find("img").clone();
//add the cloned image inside #stuff
$popup.find("#stuff").html($img);
//open popup()
$popup.popup().popup("open");
});
});
Demo & Code
Demo & Code at jsbin.com
Alternatives
You could try out swipejs, which is jQuery plugin which will provide a much more sophisticated functionality. Here's the link to the site.