Hi!
I have the Soliloquy Slider installed and it is currently on my homepage. For some strange reason it displays properly on the desktop, but in mobile view, the images are not displaying only the caption for the images appear. I tried clearing the cache and tweaking the settings, but can’t seem to figure out why. My website is https://www.keianienterprises.com
Hi There,
Thanks for writing in!
I checked the slider in mobile and I can confirm that the issue is exist. I also checked the Soliloquy Slider in other setup and find out this is the expected behaviour of the plugin because of the long description you have.
Its overlapping the image in mobile devices.
You need to make the description little shorter to look good in the mobile view.
Hope this is clear now.
Thanks
Hi. Basanta!
The length of the descriptions is necessary to explain a little about the services. However, rather than the images shrinking on mobile view to the point where it appears with the text visible covering the image in the background can it look the same way as it does on the website? I want the full images to be visible regardless of the amount of text. Responsive but still showing the full image…
Hello There,
Before I will go to your Soliloquy issue, I will go to the invalid codes you added on the page. You have added this code in wp-header.php
<meta name="twitter:card" content="summary_large_image" />
<meta name="p:domain_verify" content="6bc5f8d6e7ed4068b8e406fe5cf25760"/>
<meta name="msvalidate.01" content="9365FF5567A538FD8A56CF0A04A64FA8" />
<meta name="google-site-verification" content="kr6qVW7oFLtW4GpYdRyj5qN5h2rW5JY9SJ2gGKHgn48" />
<link href="https://plus.google.com/+Keianienterprises1" rel="publisher" />
<script src='https://www.google.com/recaptcha/api.js'></script>
<title>Shop At KEI</title>
<meta name="description" content="Keiani Enterprises, full service agency, helps brands flourish by providing online marketing services, web design via WordPress, models & talent, and more.">
<meta name=keywords content=shop Social media marketing, social media, marketing, SEO, content marketing, press release, one sheet, branding, Keiani name meaning, marketing blog, creative writing, writing service, local business, full-service agency in New Orleans/>
<meta name="geo.placename" content="New Orleans, Louisiana“>
<meta name="geo.region" content="ISO-3166-2“>
<link rel="alternate" hreflang="en-us" href="https://en.keianienterprises.com/" />
<script>
<a href="https://www.keianienterprises.com">home</a>
<a href="https://keianienterprises.com/about-us/">about us</a>
<a href="https://keianienterprises.com/services/">services</a>
<a href="https://keianienterprises.com/pricing/">pricing</a>
<a href="https://www.keianienterprises.com/pricing/web-design-estimate/">web design estimate</a>
<a href="https://keianienterprises.com/faq/">faq</a>
<a href="https://keianienterprises.com/news/">news</a>
<a href="https://keianienterprises.com/contact/">contact</a>
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="https://www.keianienterprises.com/wp-content/uploads/2017/05/Keiani.Enterprises.New_.Logo_.touch_.icon_.png" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script>
<b> This document was last modified on: </b>
<script type="text/javascript">
function lastModified() {
document.write (document.lastModified) ;
}
lastmodified () ;
</script>
This is not the correct place and file to add the code. All of these lines were supposed to be added inside the <head> tag of the page. You should be adding it in x/framework/legacy/cranium/headers/views/global/_header.php and it should be like this:
<?php
// =============================================================================
// VIEWS/GLOBAL/_HEADER.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site and includes the <head>.
// =============================================================================
?>
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
<meta name="twitter:card" content="summary_large_image" />
<meta name="p:domain_verify" content="6bc5f8d6e7ed4068b8e406fe5cf25760"/>
<meta name="msvalidate.01" content="9365FF5567A538FD8A56CF0A04A64FA8" />
<meta name="google-site-verification" content="kr6qVW7oFLtW4GpYdRyj5qN5h2rW5JY9SJ2gGKHgn48" />
<link href="https://plus.google.com/+Keianienterprises1" rel="publisher" />
<script src='https://www.google.com/recaptcha/api.js'></script>
<title>Shop At KEI</title>
<meta name="description" content="Keiani Enterprises, full service agency, helps brands flourish by providing online marketing services, web design via WordPress, models & talent, and more.">
<meta name=keywords content=shop Social media marketing, social media, marketing, SEO, content marketing, press release, one sheet, branding, Keiani name meaning, marketing blog, creative writing, writing service, local business, full-service agency in New Orleans/>
<meta name="geo.placename" content="New Orleans, Louisiana">
<meta name="geo.region" content="ISO-3166-2">
<link rel="alternate" hreflang="en-us" href="https://en.keianienterprises.com/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="https://www.keianienterprises.com/wp-content/uploads/2017/05/Keiani.Enterprises.New_.Logo_.touch_.icon_.png" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body <?php body_class(); ?>>
<div id="x-root" class="x-root">
<?php do_action( 'x_before_site_begin' ); ?>
<div id="top" class="site">
<?php do_action( 'x_after_site_begin' ); ?>
Some lines were omitted because it is not valid.
I also spotted these lines added in the footer:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@keienterprises">
<meta name="twitter:creator" content="@fantasy_5">
<meta name="twitter:title" content="Keiani Enterprises">
<meta name="twitter:description" content="While you focus on building your business, we concentrate on building your brand.">
<meta name="twitter:image" content="https://www.keianienterprises.com/wp-content/uploads/2017/12/twitter-banner-Keiani-enterprises.png">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "Keiani Enterprises",
"address": {
"@type": "PostalAddress",
"addressLocality": "201 Saint Charles Ave. , Suite 114 - 371",
"addressRegion": "New Orleans, La",
"postalCode": "70170"
},
"contactPoint" : [{
"@type" : "ContactPoint",
"telephone" : "+1-504-784-0897",
"contactType" : "customer service"
},
"@type": "Organization",
"url": "https://www.keianienterprises.com/",
"email":"support@keianienterprises.com",
"logo": "http://keianienterprises.com/wp-content/uploads/2017/05/Keiani.Enterprises.New_.Logo_.png",
}
}
</script>
<script type="application/ld+json">
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
],
"opens": "09:00",
"closes": "19:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Saturday"
],
"opens": "12:00",
"closes": "16:00"
}
]
</script>
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "WebSite",
"name" : "Keiani Enterprises",
"alternateName" : "Keiani Enterprises",
"url" : "https://www.keianienterprises.com"
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://www.keianienterprises.com/",
"name": "Home"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": " https://www.keianienterprises.com/about-us/",
"name": "About Us"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"@id": " https://www.keianienterprises.com/services/",
"name": "Services"
}
},{
"@type": "ListItem",
"position": 4,
"item": {
"@id": " https://www.keianienterprises.com/pricing/",
"name": "Pricing"
}
},{
"@type": "ListItem",
"position": 5,
"item": {
"@id": " https://www.keianienterprises.com/news/",
"name": "News"
}
}]
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type" : "Person",
"name" : "Tiffany Fantasy Clements",
"image" : "https://www.keianienterprises.com/wp-content/uploads/2017/12/forward-thinker-Tiffany-Clements.png",
"jobTitle": "Editor- in- Chief",
"url" : "https://www.celebrityscope.net",
"sameAs" : [
"https://www.facebook.com/model.fantasy.05/",
"https://instagram.com/fantasy_5",
"https://www.linkedin.com/in/keimanagement",
"https://plus.google.com/u/0/+TiffanyClements_5/posts",
"https://twitter.com/fantasy_5"
"address" : {
"@type" : "PostalAddress",
"addressLocality" : "201 Saint Charles Ave., Suite 114 - 371",
"addressRegion" : "New Orleans, La",
"postalCode" : "70170"
},
"telephone" : "(504) 784-0897",
"email" : "support@shopatkei.com"
}
</script>
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Organization",
"name" : "Shop At KEI",
"url" : "https://www.keianienterprises.com",
"sameAs" : [
"https://www.facebook.com/shopatkei/",
"https://twitter.com/keienterprises",
"https://www.linkedin.com/company/keiani-model-management-llc-",
"https://www.pinterest.com/fantasy05/keiani-enterprises-social-media-agency/",
"https://plus.google.com/+Keianienterprises1",
"https://www.youtube.com/user/keimodels",
]
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://www.keianienterprises.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://query.keianienterprises.com/search?q={search_term_pricing}",
"query-input": "required name=search_term_pricing"
}
}
</script>
<script>
<div id="blog_post" itemscope="" itemtype="http://schema.org/BlogPosting">
<h2 itemprop="name headline">KEIANI ENTERPRISES NEWSLETTER VOL. 1</h2>
<span itemprop="name">THE FASTEST WAY TO GROW YOUR BUSINESS IS BY EMBRACING THE focus
POWER OF SOCIAL MEDIA </span>
<div itemscope itemtype="http://schema.org/Article">
<img itemprop="image" src="http://keianienterprises.com/wp-content/uploads/2017/05/Keiani.Enterprises.New_.Logo_.png" alt="keiani-enterprises-social-media-agency"/>
<div class="byline">
Written by
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="name">
<a href="https://plus.google.com/+TiffanyClements_5" itemprop="url" rel="author">Tiffany "Fantasy" Clements</a>
</span>
</span>
on
<time datetime="2016-06-14T00:36" itemprop="datePublished">Friday May 26, 2017</time>
</div>
<div class="content" itemprop="articleBody">Welcome to Keiani Enterprises latest news page. It's a blog about online marketing tips and more..)</div>
</div>
</script>
Please keep in mind that anything you have inserted that is not valid and incorrect will affect other elements on the page. It may even lead to messed up the page. It may look okay for now, sooner or later, you will just wonder why your site is messed and it could be because of your invalid codes.
I made some changes to your Soliloquy slider settings. I disabled the Photon module because it caches the images with issues. The changes did not take effect immediately because you are on SiteGround. Please clear the site cache or disable the supercacher in your hosting panel first before testing the site. The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.
For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm
Hope this helps.
Hi, Rue Nel!
Why would the edits for the header.php file be added to the global folder which will affect all stacks in terms of edits if I only wish to have these particular edits for header within the Icon stack only? Also, none of the code is invalid it is Twitter meta tags etc. and schemas from schema.org and all for SEO and it work properly and should not affect how the slider plugin is appearing in mobile view. I didn’t detect errors in google webmaster tools when checking the codes I added to the header and footer.
Also, the file (wp-header.php) is currently added to this x/framework/legacy/cranium/headers/views/icon and the wp-header.php file I created is in the icon folder there inside of my child theme. This is the same way the files are added to the main X theme. I have attached a screenshot. How is it incorrect? I’m confused. I was instructed by a member of your staff some time ago to go about adding the wp-header.php file to my child theme for the icon stack. It was an exact replica of the original file prior to edits. Because the header for the icon stack is the only header file I wish to edit I did not add edits to the global header just in case I decide to use one of the other stacks to change the look of the website in the future and need to edit them individually too. From what I can see the VIEWS/GLOBAL/_HEADER.PHP and the VIEWS/ICON/WP-HEADER.PHP are two separate header files.
Hello There,
For your reference, the VIEWS/ICON/WP-HEADER.PHP is loading the VIEWS/GLOBAL/_HEADER.PHP file inside it. The contents of the wp-header.php file is this:
<?php
// =============================================================================
// VIEWS/ICON/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Icon.
// =============================================================================
?>
<?php x_get_view( 'global', '_header' ); ?>
<?php x_get_view( 'global', '_slider-above' ); ?>
<header class="<?php x_masthead_class(); ?>" role="banner">
<?php x_get_view( 'global', '_topbar' ); ?>
<?php x_get_view( 'global', '_navbar' ); ?>
<?php x_get_view( 'icon', '_breadcrumbs' ); ?>
</header>
<?php x_get_view( 'global', '_slider-below' ); ?>
And actual the line <?php x_get_view( 'global', '_header' ); ?> is loading the header.php which is
<?php
// =============================================================================
// VIEWS/GLOBAL/_HEADER.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site and includes the <head>.
// =============================================================================
?>
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="x-root" class="x-root">
<?php do_action( 'x_before_site_begin' ); ?>
<div id="top" class="site">
<?php do_action( 'x_after_site_begin' ); ?>
What you are doing is incorrect because all the <meta>, <link> and <title> html tags should only be added inside the <head> tag of the page. For your reference, please see this links:
https://www.w3schools.com/tags/tag_head.asp
https://www.w3schools.com/tags/tag_meta.asp
https://www.w3schools.com/tags/tag_title.asp
https://www.w3schools.com/tags/tag_link.asp
If you want your modifications to only work with Icon stack, you will have to add a condition just like this <?php if ( x_get_stack() == 'icon' ) : ?>. The resulting code for your header.php file is this:
<?php
// =============================================================================
// VIEWS/GLOBAL/_HEADER.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site and includes the <head>.
// =============================================================================
?>
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
<?php if ( x_get_stack() == 'icon' ) : ?>
<meta name="twitter:card" content="summary_large_image" />
<meta name="p:domain_verify" content="6bc5f8d6e7ed4068b8e406fe5cf25760"/>
<meta name="msvalidate.01" content="9365FF5567A538FD8A56CF0A04A64FA8" />
<meta name="google-site-verification" content="kr6qVW7oFLtW4GpYdRyj5qN5h2rW5JY9SJ2gGKHgn48" />
<link href="https://plus.google.com/+Keianienterprises1" rel="publisher" />
<script src='https://www.google.com/recaptcha/api.js'></script>
<title>Shop At KEI</title>
<meta name="description" content="Keiani Enterprises, full service agency, helps brands flourish by providing online marketing services, web design via WordPress, models & talent, and more.">
<meta name=keywords content=shop Social media marketing, social media, marketing, SEO, content marketing, press release, one sheet, branding, Keiani name meaning, marketing blog, creative writing, writing service, local business, full-service agency in New Orleans/>
<meta name="geo.placename" content="New Orleans, Louisiana">
<meta name="geo.region" content="ISO-3166-2">
<link rel="alternate" hreflang="en-us" href="https://en.keianienterprises.com/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="https://www.keianienterprises.com/wp-content/uploads/2017/05/Keiani.Enterprises.New_.Logo_.touch_.icon_.png" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<?php endif; ?>
</head>
<body <?php body_class(); ?>>
<div id="x-root" class="x-root">
<?php do_action( 'x_before_site_begin' ); ?>
<div id="top" class="site">
<?php do_action( 'x_after_site_begin' ); ?>
I do apologized if one of our staff instructed you to do so. It might just be a misunderstanding or must have referred you to the incorrect location.
Hope this explains it briefly.
Hi, RueNel!
If I edit the global header file wouldn’t that affect changes for all stacks unless this condition <?php if ( x_get_stack() == 'icon' ) : ?> is added that points directly to the Icon stack? Basically, what I’m trying to accomplish here is maximizing the ability to use all stacks with customizations for each and to be able to toggle back and forth to change the look of the site whenever I can. Sense each stack has its own separate header file why can’t the wp-header in each be edited individually if the fact is that I’ve only placed the and <\head> tags in the wrong place is possibly causing the issues I’m having? Can these tags just be added to the wp-header file for icon only?
Hello There,
If you want to insist in your method of adding the custom <meta>, <link> and <title> html tags and only in the wp-header.php then the contents should be this:
<?php
// =============================================================================
// VIEWS/ICON/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Icon.
// =============================================================================
?>
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
<meta name="twitter:card" content="summary_large_image" />
<meta name="p:domain_verify" content="6bc5f8d6e7ed4068b8e406fe5cf25760"/>
<meta name="msvalidate.01" content="9365FF5567A538FD8A56CF0A04A64FA8" />
<meta name="google-site-verification" content="kr6qVW7oFLtW4GpYdRyj5qN5h2rW5JY9SJ2gGKHgn48" />
<link href="https://plus.google.com/+Keianienterprises1" rel="publisher" />
<script src='https://www.google.com/recaptcha/api.js'></script>
<title>Shop At KEI</title>
<meta name="description" content="Keiani Enterprises, full service agency, helps brands flourish by providing online marketing services, web design via WordPress, models & talent, and more.">
<meta name=keywords content=shop Social media marketing, social media, marketing, SEO, content marketing, press release, one sheet, branding, Keiani name meaning, marketing blog, creative writing, writing service, local business, full-service agency in New Orleans/>
<meta name="geo.placename" content="New Orleans, Louisiana">
<meta name="geo.region" content="ISO-3166-2">
<link rel="alternate" hreflang="en-us" href="https://en.keianienterprises.com/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="https://www.keianienterprises.com/wp-content/uploads/2017/05/Keiani.Enterprises.New_.Logo_.touch_.icon_.png" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body <?php body_class(); ?>>
<div id="x-root" class="x-root">
<?php do_action( 'x_before_site_begin' ); ?>
<div id="top" class="site">
<?php do_action( 'x_after_site_begin' ); ?>
<?php x_get_view( 'global', '_slider-above' ); ?>
<header class="<?php x_masthead_class(); ?>" role="banner">
<?php x_get_view( 'global', '_topbar' ); ?>
<?php x_get_view( 'global', '_navbar' ); ?>
<?php x_get_view( 'icon', '_breadcrumbs' ); ?>
</header>
<?php x_get_view( 'global', '_slider-below' ); ?>
Hope this helps. Kindly let us know.
Hi, Ruenel!
I updated the file with your suggestions and added the navigation links inside of tags and removed…
Thanks. Back to the main question:
This is not possible. Even if you apply responsive text to the image description, the text will be unreadable. Imagine the desktop view of the slider just shrunk to fit in mobile.
Separating the image and text is also not possible with Soliloquy. If you wish to continue using it, you will need to hire a developer to tweak the slider’s layout.
You will want to use Slider Revolution (which is also bundled in X) in this case because it has more layout options. Check out the sample sliders here. And, here’s the documentation.
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.