Seeing Double!
Permalink
I have 2 lines of repeated text (tour title) that overlays my feature header images.
I'm using hidden-xs/visible-xs to show/hide the overlay text, depending on the screen size - so only one line of text shows at a time.
This works fine when I'm in edit mode, but when I log out of Concrete I see both lines of text.
I'd be interested to see if others are seeing the same thing, and if anyone has any ideas to solve this issue. Code below.
PS - I have all cache turned off so the page may take a while to load.
http://gotimetrekkers.com/stonehenge-and-great-stones-way...
Thanks
I'm using hidden-xs/visible-xs to show/hide the overlay text, depending on the screen size - so only one line of text shows at a time.
This works fine when I'm in edit mode, but when I log out of Concrete I see both lines of text.
I'd be interested to see if others are seeing the same thing, and if anyone has any ideas to solve this issue. Code below.
PS - I have all cache turned off so the page may take a while to load.
http://gotimetrekkers.com/stonehenge-and-great-stones-way...
Thanks
<div class="banner-image-wrapper" style="overflow:hidden; max-height:450px; position: relative;">
<img style="width:100%; margin-top:-13%;" src="<?php echo $image;?>" alt="<?php echo $tourtitle;?>">
<div class="banner-overlay-text hidden-xs" style="font-weight:900; font-size:2.75rem; color:#ffffff; line-height:1.5em; position:absolute; width:100%; text-align:center; top:40%;"><?php echo $tourtitle;?> </div>
<div class="banner-overlay-text visible-xs" style="font-weight:900; font-size:1.75rem; color:#ffffff; line-height:1.5em; position:absolute; width:100%; text-align:center; top:40%;"><?php echo $tourtitle;?> </div>
</div>
The styles "visible-xs" and "hidden-xs" aren't defined when you're looking at the page when you're logged out. It would appear that there is a stylesheet loaded when you are logged in that is not used when you are a guest that you are relying on.
How can that be?
It seems that none of my visible/hidden classes are working when I'm logged out, but they are fine when I'm logged in...?
It seems that none of my visible/hidden classes are working when I'm logged out, but they are fine when I'm logged in...?
Not all of the CSS that is included when you are logged in is included when you are logged out. Where did you put your CSS?
It's a custom block, and the css was inline as in the above code. Funny, because all of the other styling in that view.php works fine.
Is it possible that it is the "visible-xs/hidden-xs" that is the problem as this seems to be the only thing that is not working in this and other blocks when I'm logged out?
Is it possible that it is the "visible-xs/hidden-xs" that is the problem as this seems to be the only thing that is not working in this and other blocks when I'm logged out?
It looks like you're changing the block so I can't see what I saw before. I would check your CSS Syntax and make sure you don't have an error in there causing the rule to be invalid.
Now back to how it was. I'll check your suggestion
Working now.
It seems that visible and hidden need to be within <span></span> elements. So I just inserted these between the divs and before and after the content and it worked.
e.g.
It seems that visible and hidden need to be within <span></span> elements. So I just inserted these between the divs and before and after the content and it worked.
e.g.
<div style="some style"><span visible-xs>Content</span></div>
It seems I was a touch optimistic! I was actually logged in when I tested, and so it was working. When I'm logged out the visible-xs and hidden-xs still are not having any effect on the associated divs.
It seems, as you suggested that some css is only accessible when logged in. What do I need to do to correct this?
It seems, as you suggested that some css is only accessible when logged in. What do I need to do to correct this?
Can you attach or provide the code that you have for this block? I can't see any "inline" styles defined on the page where this block is on the page.
Hi hutman,
Here's the code
Here's the code
<div class="banner-image-wrapper" style="overflow:hidden; max-height:450px; position: relative;">
<img style="width:100%; margin-top:-13%;" src="<?php echo $image;?>" alt="<?php echo $tourtitle;?>">
<div class="banner-overlay-text hidden-xs" style="font-weight:900; font-size:2.75rem; color:#ffffff; line-height:1.5em; position:absolute; width:100%; text-align:center; top:40%;"><?php echo $tourtitle;?> </div>
<div class="banner-overlay-text visible-xs" style="font-weight:900; font-size:1.75rem; color:#ffffff; line-height:1.5em; position:absolute; width:100%; text-align:center; top:40%;"><?php echo $tourtitle;?> </div>
</div>
That code doesn't have any CSS definitions in it. Where are you defining the show/hide styles.
I thought I could use the Bootstrap method of class="hidden-xs" and class="visible-xs" as in the code. It seems to work (at least when I'm logged in), and I've seen it used elsewhere
The fundemental theme doesn't use bootstrap, it uses foundation. So bootstrap is only loaded when you are logged in (for the dashboard functionality).
So you will either have to define these styles within your block, or require that the bootstrap CSS is loaded when this block is loaded.
So you will either have to define these styles within your block, or require that the bootstrap CSS is loaded when this block is loaded.
Ah!
Which would you recommend?
Which would you recommend?
I would use Foundation classes instead of Boostrap classes, here is a link to the documentation for those.
http://foundation.zurb.com/docs/components/visibility.html...
http://foundation.zurb.com/docs/components/visibility.html...
I notice that Foundation only include small and not xs. I'm assuming small is equivalent to xs. I'll give it a try.
Tremendous! That worked. I replaced the Bootstrap classes with the Foundation classes.
e.g.
"hidden-xs" (Bootstrap) with "show-for-small-only" (Foundation)
Looks like Foundation small is equivalent to Bootstrap extrasmall (xs).
Many thanks for that
e.g.
"hidden-xs" (Bootstrap) with "show-for-small-only" (Foundation)
Looks like Foundation small is equivalent to Bootstrap extrasmall (xs).
Many thanks for that
