I work for 2 sister companies and we have copied the template of one website to another for most of the functionality.
For some reason, I cannot get the pagination to work as it does on the one website. We are using a custom theme so I can't seem to get any plugins to work.
The pagination works well here: https://clcanursing.co.uk/news/ and I want to be able to replicate how it looks and how it reacts to tablet and mobile devices. I am trying to copy it onto this page: http://clcacalldirect.com/blog/ but it fails here.
Any help would be appreciated!!
Thanks,
Andy
It seems like your issue is CSS related. You're missing some styles (like the one below). Make sure you're copying over all styles.
Use dev tools to see the differences between the two slices of code.
EDIT:
The below code gives you the exact style and functionality on tablet/mobile
#media (max-width: 1200px) {
.pagination .default--button {
border-radius: 0;
width: 49% !important;
text-align: center;
margin-top: 70px;
}
}
I would like to use a different logo for my mobile version.
I found out that you add another logo in your HTML source code and then define in CSS which logo is shown based on page size.
My problem is that I use Wordpress and can't really access the source code. I can only write something in the functions.php file.
My logo is places in the navigation bar, which makes it more difficult, too.
Would be soooo thankful for any help :)
Daniel
My Page
Yes you can use media queries to do that for example :
.mobile-logo-class {
display:none;
}
#media screen and (max-width: 768px) { // 768px or your break point
.mobile-logo-class {
display: inline-block; // or block
}
.desktop-logo-class {
display:none;
}
}
Or you can use the "Picture" tag but be careful for IE Support:
https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
In normal case, if your theme provides the options for mobile logo then you can upload different logo for your mobile sections,
if there are not options for the mobile logo into your theme then you can use media queries to set the path for mobiles width
or
you can use the plugins to show different logo for your website in mobile something like this.
https://wordpress.org/plugins/rocket-wp-mobile/
STEP 1: OK first copy the code of logo in your header file which one calling the log on your desktop, copy the code and paste it below the same dive now remove the PHP code and change the div class, and give there <img src=" your image path"> and save it. you can write HTML too for image
STEP 2: Now in CSS use CSS for hiding it. something like
.logo2-img {
display: none;
}
here logo2 is your 2nd div class .
STEP 3: Now write css with media query
#media screen and (max-width: 768px) { // 768px or your break point
.logo2-img{
display: block; //
}
.desktop-logo-class {
display:none;
}
}
thats it sorry for poor English
I have this function in my tile.twig file that shows one post on a carousel. It works fine on portrait mode on mobile.I need it to show 2 post when it is in landscape. But I do not know how to do this in twig/PHP here is the code:
{{ fn("do_action", "render-carousel", style|default('header-carousel'), carousel_list|default("Header Carousel"), img_size|default("mobile/feed/large"), carousel_show|default(1), extra_options) }}
I need the carousel_show|default(1) to be carousel_show|default(2) when in landscape mode. Any ideas
Unfortunately, it's difficult, and not performant at all, to "tell" PHP that your device is in portrait or landscape mode, and to render different amounts of HTML accordingly.
I believe you're probably a bit stuck as you're using a plugin to render the carousel and therefore don't have control over the CSS or JS.
If you'd written the carousel yourself. You'd use media queries in CSS:
#media (orientation: landscape) {
.carousel-slide {
width: 50%:
}
}
#media (orientation: portrait) {
.carousel-slide {
width: 100%
}
}
You'd also need to tell your carousel code that you're displaying either one or two slides intially:
if (window.matchMedia("(orientation: portrait)").matches) {
Carousel.init({startingNumberOfSlides:1})
}
if (window.matchMedia("(orientation: landscape)").matches) {
Carousel.init({startingNumberOfSlides:1})
}
It sounds like you won't be able to achieve this effect with the carousel plugin you're using.
Thanks,
Jon
I'm making a separate navigation bar on my site for handheld devices, so I've come up with a PHP script that detects the resolution and should output different navigation bars accordingly.
I'm really not that good with php yet, and it took me a while to come up with this rather simple script:
<?php if ($(window).width() < 764) : ?>
<p>mobile navigation</p>
<?php else : ?>
<p>normal navigation</p>
<?php endif; ?>
When I use this, the page does not load anything within or beneath this code, neither the rest of the page. I'd be very grateful if someone could help.
Thanks!
I think what you're looking for is CSS media queries.
<style>
#mobileNavigation {
display: none;
}
#media (max-width: 480px) {
#mobileNavigation {
display: block;
}
#desktopNavigation {
display: none;
}
}
</style>
<div id="mobileNavigation">Mobile users see this</div>
<div id="desktopNavigation">Desktop users see this</div>
Now, that will need a little more thinking and designing, because you'll then want your entire site to be mobile friendly and responsive.
What I am trying to do is create a site that displays my rants in faux letter form.
I want the "paper size" (div size) to be fixed, and the text to continue on the second piece of paper (a second div) displayed just below the first paper like this..
I apologize, being a new user, I am not allowed to post the
screenshots I have created to help explain my situation, so am forced
to link until I have enough reputation points:
http://img16.imageshack.us/img16/5538/pagesuc.jpg
ONLY FOR THE SAKE OF SIMPLICITY: I've created a simple html/css page to demonstrate in the simplest form what I am trying to accomplish with the code:
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.container {
background: #FFFFFF;
width: 600px;
height: 400px;
margin: 0 auto;
}
#lbox {
background: #F00;
width: 300px;
height: 400px;
float: left;
}
#rbox {
background: #00F;
width: 300px;
height: 400px;
float: right;
}
.flowcontent {
padding: 10px 50px;
}
</style>
<div class="container">
<div id="lbox">
<div class="flowcontent">
<p>Lorem Ipsum...</p>
</div>
</div>
<div id="rbox">
<div class="flowcontent"> </div>
</div>
</div>
Screenshot:
I apologize, being a new user, I am not allowed to post the
screenshots I have created to help explain my situation, so am forced
to link until I have enough reputation points:
http://img689.imageshack.us/img689/7853/overflowc.jpg
In this case I would like the overflow from the red div to continue in the blue div on the right.
I realise this may not be possible with HTML/CSS alone, but was hoping maybe CSS3 might have some new tricks for this, as it has more advanced column handling.. If that's a no go, does anyone have a suggestion for a logical way to go about breaking this up using PHP or even JavaScript or JQuery?
I know PHP, but am still a JS/JQ newb so I have provided some (hopefully) very simple example code for anyone to plug in their own JS/PHP examples.
Anyway, thanks for your time.
I came up with a small JS Script that might help you out. It's far from perfect, but might give you a decent starting point. Essentially, it loops through your large text and looks for a scrollbar to appear. You may need to alter the calculations just a bit.
JSFiddle http://jsfiddle.net/Tt9sw/2/
JS
var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
var wordArray=text.split(' ');
$.fn.hasOverflow = function() {
var div= document.getElementById($(this).attr('id'));
return div.scrollHeight>div.clientHeight;
};
for(var x=0; x<wordArray.length; x++){
var word= wordArray[x];
currentCol.append(word+' ');
if (currentCol.hasOverflow()){
currentCol = currentCol.next('.col');
}
}
HTML
<div class="col" id="col1">Lorem Ipsum ....... LONG TEXT .......</div>
<div class="col" id="col2"></div>
<div class="col" id="col3"></div>
<div class="col" id="col4"></div>
<div class="col" id="col5"></div>
CSS
.col{
width:200px;
float:left;
height:200px;
border:1px solid #999;
overflow:auto;
font-family:tahoma;
font-size:9pt;
}
UPDATE
For this example, you must include the jQuery Libray in your scripts.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
PS - if you get to know jQuery, you will start to use it for everything. It greatly increases cross-browser compatibility and simplifies many common tasks.
What you want is CSS Regions module proposed by Adobe and currently supported by zero browsers. Adobe did release a very rough webkit-based browser for playing with the spec if you're really interested. But as others have said, right now you're SOL and will need to find another solution.
http://www.adobe.com/devnet/html5/articles/css3-regions.html
http://labs.adobe.com/technologies/cssregions/
http://dev.w3.org/csswg/css3-regions/
CSS3 has Multi-column Layout Module. However, I doubt it is widely supported to the moment.
Test it on your target browsers: http://www.quirksmode.org/css/multicolumn.html
You cannot do this with HTML and CSS only. CSS is targeted primarily at web browsers, and the layout model is that of a document on a vertically expanding surface. You can make boxes auto-height (which is the default), or fixed-height, but you cannot change the way content belongs to a parent box (which is what you would need for this to work).
A few options you could consider, if this is really important to you:
Use the paged-media features that are built into CSS to provide nice paging when rendered onto paged media (such as printouts); I'm talking about properties like page-break-after, page-break-before, etc. You won't get pages in a web browser, but at least you can control how it prints on physical paper
Write some incredible clever javascript that partitions your content into pages. There's a bit of a vicious circle here, because you won't know if your content fits until you try, so you may have to reflow several times in trial-and-error fashion. If your content has a special structure you can take advantage of, e.g. a poem form, where all line breaks are explicit, or if you use a fixed-width font, then a one-pass algorithm is possible, and you may even be able to do it server-side, using PHP, ASP.NET, or any other server-side scripting technology.
Use a different document format that gives you control over pages and absolute placement of elements within a page structure, e.g. PDF. (I wouldn't recommend using PDF for general web documents though; from a user's perspective, PDFs aren't convenient at all).
Use something like Flash or Silverlight to produce the desired layout. This, too, is something you should avoid unless there are other reasons why you'd be using it anyway; also, the formatting algorithm suffers from the same problems as a javascript implementation would, except that you have more control over the rendering part (fonts, kerning, etc.).
For most things on the web, however, I'd just let go of the idea and go with a more realizable design.
If you know how many characters one of your pages hold you can separate your string dynamically using javascript or php and then print the first part of the array in the first "paper sheet" and the second on the second.
You won't be able to do that with just HTML/CSS
Shapes by Adobe does exactly that, however, it has a very limited browser support.
IE: 11+
Chrome: 37+
FireFox: 32+