I have four buttons, each with an individual div class. The problem is that they don't seem to respond to obvious selectors.
I tried, for example:-
#media (max-width:1920) and (min-width: 769) {.visit-
website {margin-top: 50px!
important;}}
Nothing.
Html:
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/22/nicos-cleaning-service/"><div
class="email"><span><center>📧</center>.
</span></div></a><a href="tel:<br/><label>Phone:
</label> 07576335122"><div class="phone"><span>.
<center>📞</center></span></div></a>
<a href="http://maps.google.com/?q=:<br/>.
<label>Location:</label> Westminster, London, UK"><div
class="location"><span><center>📍</center>.
</span></div></a>
<div class="visit-website"><Visit Website:</div>
<br/><a href="http://nicoscleaningservice.co.uk"
target="_blank">Visit Website</a>
Related
So I have the class:
awpcp-subtitle.
Within this I want to target a child element, which I can with:
#media (max-width: 1920px) and (min-width: 769px) {
.awpcp-subtitle:nth-of-type(1) {
margin-top: 440px!Important;
}
}
This enables me to move it up and down. But I want to align the text which floats left at the moment and:
#media (max-width: 1920px) and (min-width: 769px) {
.awpcp-subtitle:nth-of-type(1) {
text-align: center!Important;
}
}
Doesn't work.
Any ideas?
Here is html:
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/21/old-goriot-balzac/">Email
admin</a><a href="tel:<br/><label>Phone:</label>
07576335122"><div class="phone"><br/><label>Phone:
</label> 07576335122</div> </a>
<a href="http://maps.google.com/?q=:<br/>.
<label>Location:</label> Westminster, London, UK"><div
class="location"><br/><label>Location:</label>
Westminster, London, UK</div></a>
<div class="visit-website"><Visit Website:</div>
</div>
<div class="showawpcpadpage"><label>Price:</label>
<strong>£ 0.99</strong></div>
<div class="fixfloat"></div>
<div class="showawpcpadpage">
<div class="awpcp-subtitle">More Information</div>
Right so basically after looking at the pages code via the link you provided, its a simple case of rearranging the order of your HTML elements.
in the section div section - showawpcpadpage you need to move the awpcp-subtitle [Contact Information] to the top, instead of being under the image + links.
<div class="showawpcpadpage">
<div class="awpcp-subtitle">Contact Information</div>
<div class="awpcp-ad-primary-image">
<a class="awpcp-listing-primary-image-thickbox-link thickbox thumbnail" href="https://adsler.co.uk/wp-content/uploads/awpcp/images/19808423-2b60d824-large.jpg" rel="awpcp-gallery-21">
<img class="thumbshow" src="https://adsler.co.uk/wp-content/uploads/awpcp/thumbs/19808423-2b60d824-primary.jpg" alt="Thumbnail for the listing's main image" width="200" height="200">
</a>
that's what your HTML flow should look like.
The layout of your HTML is important. So if for example, if your header is at the top of the page, the HTML for the header should also be at the top of the page, not several elements down.
So I'd like to target a specific label class, and proceeding text, turn it into a button and have it link to dialing screen on mobile.
At the moment I can't even figure out how to target the label.
Tried using
awpcp-subtitle:nth-child(2) {background-color: #d2e03a;
color: white; text-align: center; border-radius: 2px}
.awpcp-subtitle:nth-child(odd) {background-color:
#d2e03a; color: white; text-align: center; border-radius:
2px;}
which just targets 'more information' and 'contact details'. Using 'label' targets every single label on the site.
I have this html:
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK
The label is 'phone' and proceeding text is the phone number, so I'd like to target this please. Turning it into button which links to dialing screen on mobile is a bonus, even if I can target just the label, that would be super.
What I'm trying to do is turn that 'phone' label, together with the text, into a button. I would like this button to link to dialing pad on a mobile phone device. It's a classifieds listing site so I want users to be able to press the button which links to the dialing pad so they can phone up and enquire without having to input the information manually. At the moment I just have a label and number which the user has to copy from the site and paste into dialling pad clipboard.
I would like some css to do all this, failing that some html or how to do it with html. Failing that, just way to to target the label 'phone' and the number after it so I can give them a background colour-one background color, so it looks like a button. Once I have that button look, I can start to figure out how to make it into a link and make it link to dialing pad on phone.
Even some html code which I can just insert into my header.php which does it all. Running WordPress.
More html
div id="main" class="container" role="main">
<div class="row">
<div id="primary" class="col-md-8 mb-xs-24 sidebar-
right">
<article id="post-1189" class="post-1189 page type-page
status-publish hentry">
<header class="entry-header">
<h1 class="entry-title"><span
class="hpt_headertitle">Awpcp Show Ad</span></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<div id="classiwrapper"><ul class="awpcp-classifieds-
menu awpcp-clearfix" data-breakpoints='{"tiny": [0,400],
"small": [400,500]}' data-breakpoints-class-prefix="awpcp-
classifieds-menu">
</ul>
<div id="showawpcpadpage">
<div class="awpcp-title"><a href="https://adsler.co.uk/wp-
user-test-dashboard-2/awpcp-show-ad/13/madame-
bovary/london/uk/books/">Madame Bovary</a></div>.
<br/>
<div class="showawpcpadpage">
<div class="awpcp-ad-primary-image"><a class="awpcp-
listing-primary-image-thickbox-link thickbox thumbnail"
href="https://adsler.co.uk/wp-
content/uploads/awpcp/images/61l8teochll-a0bee4d6-
large.jpg" rel="awpcp-gallery-13"><img
class="thumbshow" src="https://adsler.co.uk/wp-
content/uploads/awpcp/thumbs/61l8teochll-a0bee4d6-
primary.jpg" alt="Thumbnail for the listing's main image"
width="200" height="200"/></a><a class="thickbox
enlarge" href="https://adsler.co.uk/wp-
content/uploads/awpcp/images/61l8teochll-a0bee4d6-
large.jpg">Click to enlarge image.</a></div>
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576335122
<br/><label>Location:</label> London, UK
</div>
<div class="showawpcpadpage"><label>Price:</label>
<strong>£ 3.00</strong></div>
<div class="fixfloat"></div>
<div class="showawpcpadpage">
<div class="awpcp-subtitle">More Information</div>
This is Gustav Flaubert's most famous novel.
Cheap price.
</div>
<div class="fixfloat"></div>
<div id="displayimagethumbswrapper">
<div id="displayimagethumbs">
<ul>
</ul>
</div>
</div>
<span class="fixfloat"><div class="tw_button
awpcp_tweet_button_div"><a
href="http://twitter.com/share?
url=https%3A%2F%2Fadsler.co.uk%2Fwp-user-test-
dashboard-2%2Fawpcp-show-ad%2F13%2Fmadame-
bovary%2Flondon%2Fuk%2Fbooks%2F&text=
Madame+Bov.
ary" rel="nofollow" class="twitter-share-button"
target="_blank">Tweet This</a></div> <div
class="tw_button awpcp_tweet_button_div"><a
href="http://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fadsler.co.uk%2Fwp-user-test-
dashboard-2%2Fawpcp-show-ad%2F13%2Fmadame-
bovary%2Flondon%2Fuk%2Fbooks%2F" class="facebook-
share-button" title="Share on Facebook" target="_blank">.
</a></div> <a id="flag_ad_link" href="#" data-
ad="13">Flag Ad</a></span>
<a href="https://adsler.co.uk/wp-admin/admin.php?
page=awpcp-panel&action=edit&id=13"
title="Edit Madame Bovary">Edit Ad</a>
</div></div><!--close classiwrapper-->
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="edit-link"><a class="post-edit-link"
href="https://adsler.co.uk/wp-admin/post.php?
post=1189&action=edit">Edit <span class="screen-
reader-text">"<span class="hpt_headertitle">Awpcp Show
Ad</span>"</span></a></span> </footer><!-- .entry-
footer -->
</article><!-- #post-## -->
</div><!-- #primary -->
<aside id="secondary" class="widget-area col-md-4"
role="complementary">
<div id="text-3" class="widget widget_text">
<div class="textwidget"></div>
</div></aside><!-- #secondary -->
</div>
Adsler.co.uk is the site.
https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/13/madame-bovary/london/uk/books/ is an example of the page. Here you can see that 'email' link is clickable amd highlighted as button but 'phone and number isn't.
Any ideas?
Well you can't target plain text without an element container. If you can modify the HTML you should at the very least wrap the text in a span. However, even better would be to wrap each label/content block into a div with a class.
Since all you've shared is a small snippet, I have no way of knowing if this will work but in this example, you can get the "phone" with the nth-of-type selector.
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK
CSS
label:nth-of-type(1){
your styles
}
I'm just wondering what's the best way to format three buttons so that they show correctly on various screen sizes. So, this is what I've done so far and it looks good on 1200px width screen.
What I've done is I used the buttons and put them into span4 classes. Like so:
<div class="row-fluid">
<div class="span4">
<a class="header-btn" href="#">Testbutton 1</a>
</div>
<div class="span4">
<a class="header-btn" href="#">
Testbutton 2
</a>
</div>
<div class="span4">
<a class="header-btn" href="#">Testbutton 3</a>
</div>
</div>
However, when I shrink the screen size it looks bad and the buttons break up.
I would like to have the buttons displayed below one another once the screen size gets too small.
I could edit the span4 class from bootstrap but this could mess with the other layout... So should I just add a new class and make everything reponsive, or work with the bootstrap framework?
Please advise.
Thanks!
You seem to be using it right for v2, so maybe you might not be having bootstrap loading in correctly.
but I suggest upgrading to v3 or v4, you can learn more in the Docs. http://getbootstrap.com/css/#grid
All buttons will be inline horizontally with each other but as the screen gets smaller. the buttons will adjust and then go vertically with each other. depending on how you have it set up. But this makes it responsive.
You might want something like this, in the html:
! To see everything working the way it should, when you click the run snippet button. Click full page and then drag the side of the browser smaller and smaller, and you will see the buttons adjust. !
I hope this helps!
.div-container{
border: 1px solid black;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
button{
margin-left: 45% !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class='div-container'>
<div class='row'>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
</div>
</div>
Trying to create a responsive grid which supports mobile screens. When using jQuery mobile ui-responsive grid, the column wraps and behaves like rows(one below one) even-though the first row has space accommodate second column. If I test the same in Tablet size screens, things works fine. Where I am wrong or this is how it behaves ?
The code I used is
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<a href="#" id="link_frgt_pswd" data-inline="true" >Forgot Password ?</a>
</div>
<div class="ui-block-b">
Login
</div>
</div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<h3>For Member </h3>
</div>
<div class="ui-block-b">
<a href="#" id="link_unlock_acc" data-inline="true" >Unlock Account</a>
</div>
</div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<h3>For Provider </h3>
</div>
<div class="ui-block-b">
Register
</div>
</div>
I even tried to reduce the width of columns with css .ui-grid-a .ui-block-a { width: 30% } .ui-grid-a .ui-block-b { width: 30% }. it reduces the width but still ui-block-b remains in the next line.
The ui-responsive class in jQM adds a CSS media query for a max-width of 560px. So any time the screen is less than 560px, the columns are stacked. If you want your own custom break point, instead of ui-responsive, make your own class name and set your desired break point.
For example, if you want the stacking to happen only when screen width is below 300px:
<div class="ui-grid-a my-breakpoint">...</div>
#media all and (max-width: 300px) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float: none;
}
}
DEMO
You can also look at this demo from the jQM site:
http://demos.jquerymobile.com/1.4.5/grids-custom-responsive/
I'm trying to structure a Bootstrap nav bar such that I can have both left and right aligned content, while working for both desktop & mobile screens. I have a feeling like I'm trying to have my cake and eat it too here, but I would imagine that this should be possible.
Note that in the screenshots below, the hamburger menu icon is just a custom image (e.g., not the default Bootstrap nav bar collapse icon).
This is what I want my mobile view to (roughly) look like:
But what I'm getting is this:
Here is the desktop version, only for comparison:
And finally, here is the code I'm working with:
<div id="navbar" class="navbar navbar-custom navbar-custom-bordered-header">
<div class="navbar-header">
<div class="navbar-brand">
<img class="navbar-menu-button-custom" src="/assets/menu_button.png"/>
</div>
<a class="navbar-brand navbar-custom-brand" href="<%= root_path %>">My App</a>
</div>
<ul class="nav navbar-nav navbar-right" style="margin-right: 15px; width: auto;">
<div class="navbar-brand">
<a id="search" href="#"><span class="glyphicon glyphicon-search" style="color: white;" aria-hidden="true"></span></a>
</div>
</ul>
</div>
I'm just not sure what I need to do to achieve my desired view above. I can see that the problem appears to boil down to navbar-header's width being too large:
But I'm not sure how to enforce a smaller width for navbar-header or just one that hugs navbar-header's content. Any thoughts?
Add this to your css file.
#media (max-width: 768px) {
.navbar-header {
max-width: 250px;
}
}
You may have to change 768 and 250 values according to your bootstrap setting. But most probably this will do.