Custom div (link) blocking content / captions font size

[kubmin]

Hi there,

First of all, thanks for this awesome theme! Really great to work with!
I have a question though, I've modified the theme a little bit to show a custom link in the right corner (contact) on the mobile version. The code I've put in the mobile CSS & HTML are:

--// CSS //--

.sitetitle {
display:block;
position: fixed;
font-size: 20px;
top: 20px;
left: 20px;
border-bottom: 3px solid #000;
padding-bottom: 3px;
}

.contactlink {
position: fixed;
font-size: 20px;
border-bottom: 3px solid #000;
padding-bottom: 3px;
bottom: 20px;
right: 20px;
}

--// HTML //--

<div class="contactlink">
<a href="/contact/">Contact</a>
</div>

---

However, this code of mine causes the contact page to not show any content on the mobile view. Desktop works fine and shows all the right content. Any ideas what might be causing this problem?

Oh, and how do you know a way to change the captions font size for the mobile view?

Thanks a lot! I hope my explanation has been clear enough for you to grasp.

With kind regards,

Boris .

[arminunruh]

Hey Boris!
Can you send me the link please?
If you mean captions for images; If you use textformats to style your captions, then you can set an extra fontsize for mobile. http://laytheme.com/how-to-use.html#textformats

[kubmin]

Hi there!

Thanks for your reply!
I don't think I explained it clearly. This is the website I'm talking about: http://borissmeenk.nl/

In mobile view it shows the index page perfectly, but when I'm navigating to the contact page, it shows a blank page with just the links.

Any ideas?

Thanks for your help!

With kind regards,

Boris.

[arminunruh]

You seem to be using some custom css for the mobile version. You're hiding the text and you gave the image a class of "bureau" which also hides it. That's why you don't see anything

.bureau {
    display: none;
}

.text {
    display: none;
}

It seems that you only want to hide the text on the frontpage and not in contact for mobile. Then you need to target the frontpage's text:

body[data-type="category"][data-id="1"] .text {
    display: none;
}

Please read the first few paragraphs here to learn about targeting certain Lay Theme pages with CSS:
http://laytheme.com/how-to-use.html#custom-css-styling

Anyway, if u just want the text to be smaller on mobile, please use textformats for that.