CODEWITHSUNDEEP
htmlcssresponsive
Francis Duggan
Francis Duggan

Reputation: 45

How to hide a portion of HTML text within a DIV when adjusting browser size? using CSS)

As the Browser shrinks-i.e on an iPad/phone etc I want to hide specific text. I know I can use a media query to hide the 'text bar' completely but what about if I want to remove for example only 'Our Profits Help Support UK Charities' when someone is using an iPad or multiple pieces of text on a phone? Below is the HTML and CSS

HTML

<div class="topnav">
  <a class="active" href="#home">Why Buy From Us?></a>
  <a href="#news">Free Shipping On Orders Over £100</a> 
  <a href="#contact">Our Profits Help Support UK Charities</a>
  <a href="#about">A True Customer Focused Experience</a>
</div>

CSS

.topnav {
  background-color: #333;
  overflow: hidden;
  margin: auto;
  text-align: center; 
}
.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 100%;
  margin: auto;
}

media query

@media only screen and (max-width: 1226px) {
  .topnav {
    display: none !important;
  }
}
@media only screen and (max-width: 1226px) {
  .topnav a {
    display: none !important;
  }
}

Upvotes: 0

Views: 42

Answers (1)

dhruvpatel
dhruvpatel

Reputation: 1269

You can target elements using their attributes to apply style.

https://www.w3schools.com/css/css_attribute_selectors.asp

To answer your question, I think you can do the following in the css that is being applied for iPad:

a[href="#contact"] {
  display: none
}

Upvotes: 1

Related Questions