HIde a div with a PHP echo statement with CSS

Question

I am using the CSS display:none to hide divs in my html code. It works fine for divs that hold general html content and hides the content.

However, if the div happens to hold a PHP echo statement it does not hide the contents.

HTML

<span class="paginationFull"><?php echo $paginationCtrls;?></span>
<span class="paginationMini"><?php echo $paginationCtrlsMob;?></span>

CSS

.paginationFull{display:none}

Essentially, I am looking to show full pagination controls if in desktop and mini pagination controls if 320px - 420px. I thought that CSS display:none would be a nice easy way to do this. Does anyone, know how to accomplish this? Thanks for any help. Andy ;-)

Those are span tags and not div tags, but php is parsed before html / css so your css should be applied to the content of the echo's regardless if it comes from php or not. - Do you have other classes applied that might interfere? — Epodax
– Epodax, Commented Aug 22, 2016 at 9:30
Maybe you have error on .css file, or maybe you didn't include .css file to page header — Teymur Mardali
– Teymur Mardali, Commented Aug 22, 2016 at 9:32
Inspect your HTML source code, in the browser, does it look like you expect? — KIKO Software
– KIKO Software, Commented Aug 22, 2016 at 9:32
Or maybe there's bad HTML in $pageinationCtrls. Open your browser's developer console to examine the DOM and CSS. — Barmar
– Barmar, Commented Aug 22, 2016 at 9:32
I really can't tell what you logic is but see this <span class="paginationMini" <?php if(---){echo 'style="display:none"'; }else { ... }?>><?php echo $paginationCtrlsMob;?></span>. This lets you hide the span if a criteria is met. Or better still, try js — Mueyiwa Moses Ikomi
– Mueyiwa Moses Ikomi, Commented Aug 22, 2016 at 9:33

JaschaL · Accepted Answer · 2016-08-22 09:34:48Z

1

It shouldn't make a difference what is inside the span tag except you have some sort of HTML within span that "destroys" the DOM, so the HTML isn't valid anymore.

Besides that, you should make use of CSS media queries:

https://wiki.selfhtml.org/wiki/CSS/Media_Queries#device-width

answered Aug 22, 2016 at 9:34

JaschaL

817 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roy · Accepted Answer · 2016-08-22 09:45:49Z

0

There are some good php libraries that can detect whether the user is on their phone or on a desktop. You can then use this to control which nav is used.

Example using http://mobiledetect.net/

include 'Mobile_Detect.php';
$md = new Mobile_Detect();

if($md->isMobile()){
    echo '<span class="paginationMini">' . $paginationCtrlsMob . '</span>';
}else{
    echo '<span class="paginationFull">' . $paginationCtrls . '</span>';
}

display:none should work regardless of whether you have an echo statement inside the <span> tag. The only explanation as to why its not working in your case is if the php variables contain tags that aren't properly closed.

answered Aug 22, 2016 at 9:45

Roy

3,3175 gold badges32 silver badges46 bronze badges

1 Comment

Andy R Over a year ago

Cool, thanks for the example, that is what I am looking for.

Collectives™ on Stack Overflow

HIde a div with a PHP echo statement with CSS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related