custom function displaying on all pages - php

Question

WordPress|storefront|woo-commerce.
i am trying to display header on desktop view and footer on mobile responsive for specific page id 1.but even using specific page id both classes shows on page id 1 header,footer.Tried both id and class with cascading rule of hierarchy.Here id abc displays on page id 1 desktop view and abcd on page id 1 mobile.
My code for child function.php is
add_action( 'storefront_header', 'header_content1', 30 );
function header_content1() { ?>
<div id/class="abc" > my text with css</div><?php
}
add_action( 'storefront_after_footer', 'header_content2', 10 );
function header_content2() { ?>
<div id/class="abcd" > my text with css</div><?php
}
CSS child theme.
.page-id-1 .abc {
text-align: right;
padding-top: 0.02em;
color: #0000ff;
}
.abc{
display:none!important;
}
.abcd{
display:none!important;
}
.page-id-1 .abcd{
display:none!important;
visibility:hidden;
}
#media only screen and (max-width: 599px){
.abc{
display:none!important;
}
.abcd{
display:none!important;
}
.page-id-1 .abc{
display:none !important;
visibility:hidden;
}
.page-id-1 .abcd {
display:block !important;
text-align: center;
padding-top: 0.02em;
color: #0000ff;
}
}

Answer 1

A better approach would be to only load your function on the page that is needed instead of hidding your HTML in all pages but one...
You can check the page ID before running the function with something like this:
if (is_page('1') {
add_action( 'storefront_header', 'header_content1', 30 );
function header_content1() { ?>
<div id/class="abc" > my text with css</div><?php
}
}