I have some div classes:
<a href="https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-reply-
to-ad/31/3-books/"><div class="email"><span><center><span class="fa
fa-envelope"></span></center></span></div></a><a href="tel:<br/>.
<label>Phone:</label> XXXX. XXXX XXXX"><div class="phone"><span>.
<center><span class="fas fa-phone"</span></center></span></div></a>
<a href="http://maps.google.com/maps?q=<br/><label>Location:</label>
London, London,
UK&zoom=14&size=512x512&maptype=roadmap&sensor=false""><div
class="location"><span><center><span class="fas fa-map-marker-alt".
</span></center></span></div></a>
One,.email i can't seem to alter the width in orientation:landscape
Tried css:
#media (max-width: 768px)and (orientation: landscape){.email {padding:0px; position: unset; float:unset; width: unset;background-color:unset; margin:unset; height:unset; display:unset;}}
and
#media (max-width: 768px)and (orientation: landscape){.awpcp-subtitle >.email {width: 10px !important; display:block;}}
Page for mobile landscapes view :https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/31/3-books/london/uk/london/business-advert/
Related
I'm attempting to display the content of <div class="myio"> within the range of 993px and 1202px. I've tried everything, however nothing happens when I insert this media query in my CSS rules. I have not added any styling to <div class="myio">.
#media (min-width: 1202px) and (max-width: 993px) {
.myio {
display: none;
}
}
<div class="w3-bar w3-light-grey">
<a id="black" href="#" class="w3-bar-item w3-button">Log In</a>
<a id="green" href="#" class="w3-bar-item w3-button">Become A Goat</a>
<div class="myio">
FREE ADVICE
BID HELP
ODDS
RUMORS
APPENDAGES
EVALUATIONS
GOATS
CONTACTS
FAQ's
</div>
</div>
it doesn't work because you mixed up the max and min widths
as below example display: none apply from 993 to 1202px
#media (min-width: 993px) and (max-width: 1202px) {
.myio { display: none; }
}
in the version that you have the display: none will be lower than 993 width
I am trying to move my first nav link (home icon) down so it doesn't get covered by the 'book free consultation' button above. It doesn't seem to apply the padding and not sure what I am doing incorrectly
CSS:
#media only screen and (max-width: 600px) {
#mega-menu-primary li.mega-menu-item:first-child{
padding-top:20px !important;
}
}
HTML:
<div class="header-navigation-wrapper">
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<div id="mega-menu-wrap-primary" class="mega-menu-wrap">
<div class="mega-menu-toggle">
<div class="mega-toggle-blocks-left"></div>
<div class="mega-toggle-blocks-center"></div>
<div class="mega-toggle-blocks-right">
<div class="mega-toggle-block mega-menu-toggle-block mega-toggle-block-1" id="mega-toggle-block-1" tabindex="0"><span class="mega-toggle-label" role="button" aria-expanded="false"><span class="mega-toggle-label-closed">MENU</span><span class="mega-toggle-label-open">MENU</span></span></div>
</div>
</div>
<ul id="mega-menu-primary" class="mega-menu max-mega-menu mega-menu-horizontal" data-event="hover_intent" data-effect="disabled" data-effect-speed="200" data-effect-mobile="slide_left" data-effect-speed-mobile="400" data-mobile-force-width="body" data-second-click="close" data-document-click="collapse" data-vertical-behaviour="accordion" data-breakpoint="1023" data-unbind="false" data-hover-intent-timeout="300" data-hover-intent-interval="100">
<li class="mega-nav-menu-links mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-home mega-current-menu-item mega-page_item mega-page-item-2 mega-current_page_item mega-align-bottom-left mega-menu-flyout mega-menu-item-1521 nav-menu-links" id="mega-menu-item-1521"><a class="mega-menu-link" href="https://test.com/staging/4326/" tabindex="0"><i class="fa fa-home" aria-hidden="true"></i></a></li>
...
</ul>
</div>
</ul>
</nav>
<!-- .primary-menu-wrapper -->
</div>
Image to show issue:
Try using this if it works #mega-menu-primary > li:first-child {}
I've edited this after another look at your code.
I've noticed your using the id selectorwhen you are looking for classes. The # looks for ids, but you want to look for classes, so use a . instead in your #media query
#media only screen and (max-width: 600px) {
.mega-menu-primary li.mega-menu-item:first-child{
padding-top:20px !important;
}
}
Use margin like so:
#media only screen and (max-width: 600px) {
#mega-menu-primary li.mega-menu-item:first-child{
margin-top:20px !important;
}
}
margin helps push the nav down.
How can i have a button lose it's text but not it's icon when viewing on a mobile advice?
For example when it shows a face icon by MaterializeCSS and the text "support", I want it to remove the text but still show the icon so the button becomes smaller in size. I use the MaterializeCSS framework and the Materialize icons.
The button looks like this in html:
<a class="waves-effect waves-light white-text top-button z-depth-2">
<i class="material-icons left">
face
</i>
Contact support
</a>
<a class="waves-effect waves-light white-text top-button z-depth-2">
<i class="material-icons left">
face
</i>
<span class="hide-on-small-only"> Contact support </span>
</a>
You need to add span tag with hide-on-small-only class from materialize to hide button text on mobile only.
Try this one
Use media query on mobile like this .
#media only screen and (max-width: 767px) {
.top-button {
font-size: 0;
}
.top-button i {
font-size: 16px;
}
}
Here is the working code
.top-button {
font-size: 16px;
}
#media only screen and (max-width: 767px) {
.top-button {
font-size: 0;
}
.top-button i {
font-size: 16px;
}
}
<a class="waves-effect waves-light white-text top-button z-depth-2"><i class="material-icons left">face</i>Contact support</a>
I have col-sm-4 Bootstrap classes applied to some list elements that are inside a jQuery slider (lightslider) component.
When the screen is between 801px and 991px, I want the list element to increase to 160px since currently, it is too small and the data is squashed a bit.
In Chrome developer tool, the styling is applied from the following css:
element.style {
width: 142px;
margin-right: 10px;
}
This is my HTML:
<ul id="responsive" >
#foreach (var item in Model.Categories)
{
<li id="list-size-increase" class="col-sm-4 align-centre list-size-increase">
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<img src="#item.OutputImage" alt="#item.Image" />
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</li>
}
</ul>
I've attempted with this id class, but I see no change:
#media (min-width: 801px) and (max-width: 991){
.list-size-increase{
width:160px;
}
}
This solved it:
#media (min-width: 801px) and (max-width: 991px){
.list-size-increase {
width: 160px !important;
}
}
The !important keyword allows new styling to take precedence over inline styles. Oh how I love remembering and learning.
I am trying to add a div for social network widgets to the end of the footer on my website.The code works out on my desktop,but the contents alignment is changed when I test it on ipad,iphone and windows phone.Here is the code:
<div style="background-color: #1E2629;">
<div class="container">
<div class="row text-center">
<div>
<ul class="list-inline">
<li>
<div class="fb-like" style="overflow:hidden;" data-href="https://www.facebook.com/WebsitePage" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
</li>
<li>
<div>
Follow #CardInbox
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
</div>
</li>
<li>
<div>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/FollowCompany" data-id="111111">
</script>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Add media queries for each device screen size,
/* Ipad Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* your css code
.container {} */
}
/* iPhone 4/4s Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
/* your css code
.container {} */
}
/*5/5S */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
Windows phones comes in different screen size. So configure accordingly .