I try to modify single.php in WordPress theme, by adding social buttons before & after the post contents, as below:
<div class="socialsharebuttons">
<strong>SHARE NOW:</strong><?php echo do_shortcode('[DISPLAY_ULTIMATE_SOCIAL_ICONS]'); ?>
</div>
<div class="entry">
<?php the_content(''); ?>
</div>
<div class="socialsharebuttons">
<strong>SHARE NOW:</strong><?php echo do_shortcode('[DISPLAY_ULTIMATE_SOCIAL_ICONS]'); ?>
</div>
In the code, the "SHARE NOW" text appears right before the PHP code that generate the shortcode. However, after displaying the post such as http://www.sybase-recovery.com/blogs/datanumen-archive-repair-3-8-is-released-on-may-16-2021/, I find the "SHARE NOW" shows AFTER the social buttons, as below:
I then use Chrome DevTools to diagnose the issue, and find the codes are:
<div class="socialsharebuttons">
<strong>SHARE NOW:</strong><div class="sfsi_widget sfsi_shortcode_container">...</div>
</div>
The "SHARE NOW" is also before the <div class="sfsi_widget sfsi_shortcode_container">.
I then check the CSS for , and find it has property float: left. So I follow the instructions in https://stackoverflow.com/a/2417150/2704265 and modify CSS as below:
div.socialsharebuttons {
display: inline-block;
width: 100%;
float: left;
}
But that still not working, why?
This happens because strong is an inline element so it won't respect the preceding floats. In order to make it side by side just set
div.socialsharebuttons strong{
float: left;
margin-top: 13px;
}
After setting this it will looking like this
If you want the list to go after the text use
div.socialsharebuttons strong{
display: block;
margin-bottom: 13px;
}
you want the "share now" in front, or above the social buttons?
For above it's:
.sfsi_shortcode_container {
float: none;
}
In Front:
.sfsi_shortcode_container {
float: right;
margin-left:10px;
}
.socialsharebuttons > strong {
position: relative;
top: 15px;
}
Related
I've recently started learning web dev. I'm making a site that fetches data from the mealdb api and displays the data. I've mostly gotten everything working, but the issue is when I inspect the web page and view it on mobile, the image is rendered on top of the text, i.e. the title and the ingredients. How do I prevent this from happening?
Ideally, on a mobile device, I'd like to show the title, followed by the image, ingredients and the instructions in a single column.
This is how it looks on desktop:
On mobile:
.Recipe {
padding-top: 30px;
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: auto;
vertical-align: text-top;
}
.left-content {
width: 40%;
float: left;
}
.list {
list-style: none;
padding-left: 0px;
padding-bottom: 15px;
font-size: 1.2rem;
}
.right-content {
width: 40%;
float: right;
}
.title {
font-size: 3rem;
justify-content: center;
padding-bottom: 0px;
}
.instructions {
font-size: 1.2rem;
}
.Recipe h1 {
text-align: center;
padding-left: 250px;
}
.image {
float: right;
height: 480px;
width: 480px;
margin: 20px
}
<div className="Recipe">
<div className="left-content">
<h2 className="title">{prop.food.meals[0].strMeal}</h2>
<ul className="list">
{prop.materials.map(function(ingredients){ return
<li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
})}
</ul>
<p className="instructions">{prop.food.meals[0].strInstructions}</p>
</div>
<div className="right-content">
<img src={prop.food.meals[0].strMealThumb} alt="" className="image" />
</div>
</div>
This is a CSS situation, and for this specific situation I highly suggest learning about grid: https://css-tricks.com/snippets/css/complete-guide-grid/
Now, I know you probably don't want to read that much or learn something entirely new just to solve this. So for now I will give you a quick solution, which it isn't so bad in terms of performance.
You can use react-device-detect
It has some components that print specifically on Desktop or Mobile. So in your case you can have something like this:
import {BrowserView, MobileView} from 'react-device-detect';
And in your render:
<div className="Recipe">
<div className="left-content">
<h2 className="title">{prop.food.meals[0].strMeal}</h2>
<MobileView>
<img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
</MobileView>
<ul className="list">
{prop.materials.map(function(ingredients){
return <li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
})}
</ul>
<p className="instructions">{prop.food.meals[0].strInstructions}</p>
</div>
<BrowserView>
<div className="right-content">
<img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
</div>
</BrowserView>
</div>
The idea is printing the image "twice", one for mobile and one for desktop. However, they will not be printed at the same time, obviously. And the images on web get requested only once, so you can print the same image dozens of time but it will only be loaded once on the browser, which is why this alternate solution works well.
If you don't want to use react-device-detect, you can print the image twice (on the same location as the example), and on CSS just use Media Query to set a display: none for mobile and desktop when they're not required. Let me know if you prefer CSS and I can elaborate further on how to do this on CSS. But I don't suggest this one because it is less efficient since the HTML will have two tags of the same image even if you're hiding them on CSS.
Let me know if you have any questions. And I hope this was helpful.
I have a problem with an unordered list when I insert a variable inside an image.
Please have a look at this fiddle.
So basically, what I get here is a list of images, centred and floated to the left, with left alignment on new lines as well.
In Jsfiddle I used a random image. When I copy this code exactly as it is into my code it works fine. When I swap the random image to a PHP variable the whole list jumps around and it looks very bad. Allow me to illustrate what I see with a PHP variable inserted:
I have no idea why this becomes like this. Here is my code with the PHP variable:
<div class="snaps-wrap">
<ul>
<?php
//Here is php code which works fine
?>
<li>
<a href="#">
<img id="snap-img" src="<?php echo $snappic?>" alt="">
</a>
</li>
<?php }
}
?>
<p style="clear: both;"></p>
</ul>
</div>
Here is CSS:
.snaps-wrap {
width: 70%;
margin: 0 auto;
padding: 0;
}
.snaps-wrap ul {
padding: 0.5em 0;
text-align:center;
margin:0 auto;
background:#ddd;
list-style: none;;
}
.snaps-wrap ul li {
float: left;
width: 25%;
margin: 0.5em 0;
}
#snap-img {
width: 150px;
}
As I mentioned, with the image used in jsfiddle this works fine, as soon as I change the image source to my variable it becomes misplaced.
Any ideas why this happens and how to fix this?
I am trying to make some information sit next to a side panel I have created using Div's.
I have tried to float the text on the left but this hasn't worked.
Here is what I have
Click here
And this is what I want
Click here
I'll show you my page and the style sheet I'm using as well :D
Page:
FitnessHub
<div class="SidePanel">
Text
</div>
<div class="WelcomeText">
</div>
<?php
$db = new mysqli("127.0.0.1", "root", "root", "fitnessbooking");
$query= $db->query("select Username from users where Username = '$_POST[username]' and Pass = '$_POST[password]'");
if ($query->num_rows ==1){
echo "";
}
else {
header("Location: http://localhost/pages/login.php?fail=1");
exit;
}
?>
</body>
</html>
Style Sheet:
.SidePanel {
background-color: white;
width: 250px;
height: 100%;
}
.WelcomeText {
Float left;
}
First, be advised that you code is susceptible to SQL injection attacks. You should be using parameterized queries or at least escaping them.
http://php.net/manual/en/security.database.sql-injection.php
Second, float both items left:
.SidePanel { float: left; }
.WelcomeText { float: left; }
You are missing : in your style,
.WelcomeText {
Float: left;
}
You could remove the float:left and add display: inline-block; to both the side-panel and welcome-text classes.
The default display property for a div is block, which means it would be forced below the sidePanel div.
So a quick way around this is to use the inline-block property.
.SidePanel {
background-color: white;
width: 250px;
height: 100%;
display: inline-block;
}
.WelcomeText {
display: inline-block;
}
Here is a great explanation of why inline-block is now preferable to float: https://stackoverflow.com/a/15177860/5995092
"A huge benefit of display:inline-block is that when other developers are maintaining your code at a later point, it is much more obvious what display:inline-block and text-align:right is trying to accomplish than a float:left or float:right statement." - Alex W.
I am trying to create a mock up of a PSD file and i'm having trouble getting some tags at the bottom of a blog post to behave.
Here is a link to the image;
http://imageshack.com/a/img923/5718/rfVFqe.png
(I'm not allowed to post real images yet)
Here is my css code so far for it;
.comment { content:url(comment.png) ; height:auto; width:auto; }
and then in the html;
<div class="comment"><p>comments</p></div>
the text does not appear at all however. I'm not sure if I can make it work this way?
Thanks all.
I did a similar thing for a footer of a page recently, but I had to use img and p tags.
<div class="comment">
<img src="svg/phone.svg" alt="Phone">
<p>800-888-0123</p>
<img src="svg/email.svg" alt="Email">
<p>billy#billsplumbing.ca</p>
</div>
That was my markup, and my CSS looked something like:
div.comment *{
display:inline-block;
margin:0 .2rem;
}
div.comment p{
margin-right:1rem;
}
div.comment img{
height:25px;
width: 25px;
}
I don't know if this is quite what you're looking for, but this is how I did basically what you are showing.
Why not use background: url(comment.png) instead? And then add some padding-left to the div.
Code:
.comment{
background: url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/bubble-24-24.png') no-repeat;
padding-left: 30px;
height: 24px;
float: left;
margin-right: 10px;
}
.comment p{
margin: 0
}
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}