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.
Related
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>
Images only in this particular row of my webpage are disappearing when displayed on the iPad mini (768x1024) and the Galaxy Tablet (800x1280). Other content in the section remain visible. Why would this be happening? Is there a quirk with the mobile devices or perhaps an error in my CSS? (On the rest of the page both images and text are displaying properly on mobile devices.)
The (barebones) code for the row is:
<div class="row" id="advertcontainer">
<h2 class="wow fadeInUp adjust" data-wow-delay="0.2s" style="max-width: 100%;display: block;">What's On across the Lakeside Group</h2>
<div class="grid_4 wow fadeIn" data-wow-delay="0.2s">
<div class="imagediv">
<a href=""><img src="image.jpg" alt="image test" />
<div class="transparent_ribbon"></div>
<div class="overlayeventname">Text here</div>
<div class="overlayeventplace">More text here</div>
</a>
</div>
</div>
</div><!-- /row /advertcontainer -->
In my CSS I've set a breakpoint of 768 to hide this entire row:
#media (min-width: 320px) and (max-width: 768px) {
#advertcontainer {
display: none;
}
}
My complete stylesheet can be viewed at http://www.lakesidesurrey.co.uk/css/style.css
This is what it should look like
But this is what is being displayed on the iPad mini and the Galaxy Tablet
You have this rule in your CSS:
.imagediv img {
position: absolute;
z-index: -1;
}
This will move those images behind all regular layers and change their position to the upper left corner of their containers (if they have position: relative). If those parent elements are not transparent, the images will remain invisible.
Plus, if the image size isn't set within the img tag, the size will be 0x0 since there is no defined widthand height --> they'll be invisible...
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/
Is it possible to remove the padding from one particular grid within Boostrap 3 -
I need to layout images responsively but the design requires no gaps between columns.
Bootstrap 3 introduced row-no-gutters in v3.4.0
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
Yep you can do it by creating a custom style sheet and adding a additional css selector to the col class. [http://www.bootply.com/FtnGzu0dea][1]
/* CSS used here will be applied after bootstrap.css */
.thumbnails {
padding: 0;
}
<div class="wrapper">
<div class="container">
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
</div>
</div>
[1]: http://www.bootp
ly.com/FtnGzu0dea
My suggestion is to add a class for removing the padding at a certain media query width. Here is a test case that uses a header image that should respect the padding at all but the small size. At that point it has no padding and fits the full width of the viewport. I highly recommend using #screen-xs-max if you are compiling LESS source files. It avoids the one pixel jump for media queries that use max-width.
http://jsfiddle.net/jmarikle/htmn5Lov/
CSS
#media (max-width: 767px) { /* replaced with #screen-xs-max if using LESS */
.sm-no-padding [class*=col-] {
padding: 0;
}
}
HTML
<div class="row sm-no-padding">
<div class="col-sm-12">
<img class="img-responsive" src="//placehold.it/2000x1000"/>
Image and/or content in a row where we remove the padding for small screens
</div>
</div>
If you want more granular control with columns rather than at the row level, just apply the class to the columns and change your selector to [class*=col-].sm-no-padding
You can also create a new CSS class and add the following code into your stylesheet.
Custom CSS:
.no-padding > [class*='col-'] {
padding-right:0;
padding-left:0;
}
new CSS to use into your HTML div
.no-padding
I have this script
<div class='col-md-6 col-left'>some text</div>
<div class='col-md-6 col-right'>some more text</div>
So from left site I have col-left and on right side col-right. Now, when I change width of browser to width <=400 col-left jump to top and col-right jump to bottom. Can I somehow change this? I want to have col-right on top of col-left when I have media max-width = 400
Check out column ordering:
<div class="row">
<div class="col-md-6 col-md-push-6">On top on small screens, right column otherwise.</div>
<div class="col-md-6 col-md-pull-6">On bottom on small screens, left column otherwise.</div>
</div>
use this:
#media handheld, only screen and (max-width: 400px) {
.col-right { float:left; }
}