I have developed my portfolio website using a sample grid-based bootstrap template.
After coding, I have tried testing the hyperlinks on the mobile device. But the links does not function on the mobile display.
I attempted some suggested solutions found online. But no luck so far. Can anybody help me find the issue? Please.
Portfolio link: https://pruthvirajn.github.io/
Page with problem: Contact page (right-top menu option in the home page)
Links not functioning: twitter button, google+ button and rest of the hyperlinks in the portfolio.
As you can see below, col-lg-12 text-center is covering the links, so when you try to click the link, you are actually clicking the container for the h2.project-title.
To fix this, add this CSS:
.contact col-lg-12.text-center {
pointer-events: none;
}
This allows the user to click through the container and on the links. More info on pointer-events.
or:
.contact col-lg-12.text-center {
display: inline-block;
width: 100%;
}
This makes the container only as tall as the title, allowing you to click the things.
You are using Bootstrap so you can use a class to centralize its link by adding a class, hope it will work <a target="_blank" href="https://twitter.com/PruthvirajNGS" class="btn-social btn-outline text-center"><i class="fa fa-fw fa-twitter"></i></a>
Related
I'm trying to setup a Blogger site and would like to include a horizontal set of social media links in the footer. I can add image widgets in Blogger that are linked, but when I add more than one they appear vertically and left-justified. I tried wrapping the widgets I wanted in <div> tags and using css to alter their positioning, but Blogger wouldn't let me save the raw code saying:
All widgets must be wrapped with a <section> tag.
Has anyone else had this issue and if so how did you over come it?
Thank you in advance for any help.
Instead of adding each link separately with Blogger’s image widget, insert a single HTML/Java widget with code similar to the chunk below with the link and image path references updated to the ones you plan to use.
<div id="menu">
<ul>
<li><img src="img_src1”></li>
<li><img src="img_src2”></li>
</ul>
</div>
Then go into the “Theme” panel and click “Customize”. In the new screen choose the “Advanced” tab and scroll down to “Add CSS”. Paste the below code to be added. The result should be a horizontal list of linked images in your footer.
#menu ul{
list-style: none;
text-align: center;
}
#menu li{
display: inline;
margin: 10px;
}
Note: you can change the spacing by changing margin if desired.
Also, since you mentioned you were using the Image widget which allows you to upload images, if you need your own images hosted you can still use the Image widget for this. Upload your image into an Image widget and place it on your home page. Go to your website and right-click on the image and choose "Open in New Tab". Copy the URL and place it into the html list you're creating to house your social media links. You can then tun off the visibility of the Image widget and Blogger will still host the image.
Hi I am a student new to Wordpress and CSS and HTML coding in general. I have provided a link of my website below.
https://homepages.shu.ac.uk/~b7009049/wordpress/
What I need help in is making the social media icons that are on the left side of the website disappear upon pressing the + sign that is on top of it. One thing to mention is that I used a plugin called 'layerslider.' and I will type the code on the sheet they provide. As that's where I got the social media icons from.
add z-index: 99999999 !important; to .fusion-sliding-bar-position-left
add this CSS your custom css file
.fusion-sliding-bar-position-left {
z-index: 99999999 !important;
}
On the following demo (http://bootsnipp.com/snippets/GXb7V) we have this line of markup:
<a class="navbar-brand" href="#">Brand</a>
Regardless of whether the href is changed to a URL or even left as the # it is not possible to click on this link.
Does anyone know how to fix this?
I believe the issue may be something to do with the search form and the way it expands to be full width of the nav (see bootsnipp for an example). I have also read a post here (Link isn't clickable within my navbar on Bootstrap 2 page) which discusses a clearfix class but that hasn't helped in this case.
Its likely because there is another element on top of it. You can fix it by changing its z-index.
a.navbar-brand {
position: relative;
z-index: 1;
}
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
I have a wordpress site and am using the plugin 'Yet Another Social Plugin' to add social buttons at the end of each post. The problem is on my mobile site which I have customized with WP-Mobile is showing these buttons. I am able to remove all of them except the G+ button. I am able to get it removed using visibility: none; when I do a live edit inside of Chrome developer console but when I apply that in the css it is ignored and I am not even seeing it when I view that tag/class. Is there some trick or something weird about the +1 button that I am missing?
You can view a picture of the issue here, https://dl.dropboxusercontent.com/u/11217802/Screenshot_2013-04-28-00-07-03.png
and a good 'test page' is here,
http://jrummy16.com/test/app-manager-overview/
Our test site is currently jrummy16.com/test. I am just spoofing my User agent to view it on my computer.
Edit
Sorry, I didn't see that you were talking about your mobile site.
In this case, add
.plusone{
display: none;
}
to your CSS - it will hide the entire iframe.
As your G+ "a" as no ID nor class, edit your css to add
.socialmedia-buttons a:nth-child(2) {
display: none;
}
Consider using display:none; rather than visibility:hidden;, as the visibility property holds the placeholder of your div while display suppress it of the flow.
Visibility:hidden; =>
This should do the trick (tried with Chrome inspector on this page).