Question: Anchor link not working on desktop but works on mobile

Question

Anchor link not working on desktop but works on mobile

Answers 4
Added at 2016-12-31 02:12
Tags
Question

I have a link on this page: http://www.appetiteforexcellence.com/young-chef/ within the text on the page (the word "years") which does not actually link through to the desired page on desktop view but works on mobile. When inspecting element I can see the anchor tags but can't seem to get it working. Any help would be appreciated.

Thanks

Answers to

Anchor link not working on desktop but works on mobile

nr: #1 dodano: 2016-12-31 02:12
.page-id-98  .white-container .page-content {
  position: relative;
  z-index: 1
}

should fix it.

It was overlapped by the next .row and clicks didn't get to it. Alternatively, if you don't need pointer-events on the following .row, you could set pointer-events:none on it, to allow click events to pass through, like this:

.page-id-98  .white-container .page-content + .row {
  pointer-events: none;
}

Note this second code-block is alternative to first, not cumulative (you don't need both). And I believe first one is better (less possible complications).


Above I tried to explain why your link didn't work, so you know how to debug it next time you run into this type of problems. But the practical solution is to wrap your column in a .row, as others suggested. The main reason being that Bootstrap recommends all [class^="col-"]s should be immediate children of .rows. If they aren't you'll run into negative margins problems and your content will develop hard to debug horizontal scrollbars at widths from 992px to 1022px and from 768px to 798px.

nr: #2 dodano: 2016-12-31 02:12

Try wrapping the following div in a row class:

<div class="row">
    <div class="col-md-10 col-md-offset-1 article-content page-content">...</div>
</div>
nr: #3 dodano: 2016-12-31 02:12

Just add the missing <div class="row">-Wrapper as I have shown below:

<div class="white-container">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1 article-content page-content">
        <p style="text-align: left;">Here you will find all the information regarding Electrolux Australian Young Chef and this years program. to find out more about our past young chefs, click on the <a href="http://www.appetiteforexcellence.com/inspiration-series-peter-doyle/" onclick="_gaq.push(['_trackEvent', 'outbound-article-int', 'http://www.appetiteforexcellence.com/inspiration-series-peter-doyle/', 'years ']);"
        title="what does hospitality mean to Peter Doyle?">years </a>below.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="homepage-page-item small-item">
          <a href="http://www.appetiteforexcellence.com/about-young-chef/">
            <img width="315" height="210" src="http://www.appetiteforexcellence.com/appetite/wp-content/uploads/2016/01/about-young-excellence-315x210.jpg" class="attachment-home-thumb wp-post-image" alt="2016 cul" /> <span>about young chef</span>
          </a>
        </div>
      </div>
    </div>
  </div>

nr: #4 dodano: 2016-12-31 04:12

Don't need to use position:relative , Your structure is wrong. all sections are overlapped one another, if you want to fix this simply you need to edit your source code, separate each row like see given below

.full-width {
   width:100%;
   float:left;
 }

<div class="full-width">
   <div class="row"></div>
</div>
<div class="full-width">
   <div class="row"></div>
</div>
<div class="full-width">
   <div class="row years-row"></div>
</div>

now your section are separate blocks, there is no overlap issue , Thanks

Source Show
◀ Wstecz