Pano to ipunta sa right side nya

[loktoy]

pano to ilipat sa right side yun update nakadikit kasi sa Reminder na text
html code:
<div class="bottom-content">
<div class="content-container">
<div class="content-display">
<div class="content-list">
<div class="list-wrapper">
<h3>Reminder<span><a href='editpost.php?id=<?php echo $id_comment ?>' class="btn-update" >update</a><br></span></h3>

css code ko:

}
.bottom-content .content-container .content-display .content-list .list-wrapper h3 {
text-align: center;
font-size: 25px;
font-weight: 600;
margin:0;
margin: 5px 0 5px;

}
.bottom-content .content-container .content-display .content-list .list-wrapper h3 span {
display: flex;
display: inline;
text-align: end;


}
.bottom-content .content-container .content-display .content-list .list-wrapper h3 span a {
color: #09c372;
align-items:flex-end;
text-align: right;
}

 

[🤖]

To move the "update" link to the right side of the reminder text, you can modify the HTML and CSS code as follows:

HTML code:

<div class="bottom-content">
    <div class="content-container">
        <div class="content-display">
            <div class="content-list">
                <div class="list-wrapper">
                    <h3>Reminder<span><a href='editpost.php?id=<?php echo $id_comment ?>' class="btn-update">update</a></span></h3>
                </div>
            </div>
        </div>
    </div>
</div>

CSS code:

.bottom-content .content-container .content-display .content-list .list-wrapper h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 25px;
    font-weight: 600;
    margin: 0;
}

.bottom-content .content-container .content-display .content-list .list-wrapper h3 a {
    color: #09c372;
}

Explanation:
1. In the HTML code, I removed the <br> tag after the "update" link, as it is not necessary.
2. In the CSS code, I added display: flex; to the h3 element to make it a flex container.
3. I used justify-content: space-between; to push the "update" link to the right side of the container.
4. Removed the unnecessary CSS rules from .bottom-content .content-container .content-display .content-list .list-wrapper h3 span and .bottom-content .content-container .content-display .content-list .list-wrapper h3 span a.

By making these changes, the "update" link should now be aligned to the right side of the reminder text.

 

[loktoy]

To move the "update" link to the right side of the reminder text, you can modify the HTML and CSS code as follows:

HTML code:

<div class="bottom-content">
    <div class="content-container">
        <div class="content-display">
            <div class="content-list">
                <div class="list-wrapper">
                    <h3>Reminder<span><a href='editpost.php?id=<?php echo $id_comment ?>' class="btn-update">update</a></span></h3>
                </div>
            </div>
        </div>
    </div>
</div>

CSS code:

.bottom-content .content-container .content-display .content-list .list-wrapper h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 25px;
    font-weight: 600;
    margin: 0;
}

.bottom-content .content-container .content-display .content-list .list-wrapper h3 a {
    color: #09c372;
}

Explanation:
1. In the HTML code, I removed the <br> tag after the "update" link, as it is not necessary.
2. In the CSS code, I added display: flex; to the h3 element to make it a flex container.
3. I used justify-content: space-between; to push the "update" link to the right side of the container.
4. Removed the unnecessary CSS rules from .bottom-content .content-container .content-display .content-list .list-wrapper h3 span and .bottom-content .content-container .content-display .content-list .list-wrapper h3 span a.

By making these changes, the "update" link should now be aligned to the right side of the reminder text.

gusto ko is nasa gitna yun Reminder text tapos yun update is nasa right side po

 

[🤖]

gusto ko is nasa gitna yun Reminder text tapos yun update is nasa right side po

To achieve the desired layout with the reminder text in the center and the update link on the right side, you can modify the HTML and CSS code as follows:

HTML code:

<div class="bottom-content">
    <div class="content-container">
        <div class="content-display">
            <div class="content-list">
                <div class="list-wrapper">
                    <h3 class="reminder">Reminder</h3>
                    <span class="update-wrapper"><a href='editpost.php?id=<?php echo $id_comment ?>' class="btn-update">update</a></span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS code:

.bottom-content .content-container .content-display .content-list .list-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-content .content-container .content-display .content-list .list-wrapper .reminder {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    margin: 0;
}

.bottom-content .content-container .content-display .content-list .list-wrapper .update-wrapper {
    text-align: right;
}

.bottom-content .content-container .content-display .content-list .list-wrapper .update-wrapper a {
    color: #09c372;
}

Explanation:
1. In the HTML code, I added a separate span element with the class update-wrapper to wrap the "update" link.
2. In the CSS code, I added the necessary styles to the new span element and adjusted the existing styles.
3. The display: flex; property is applied to the .list-wrapper to create a flex container.
4. The justify-content: space-between; property is used to push the reminder text to the left and the update link to the right within the flex container.
5. The .reminder class is used to style the reminder text with text-align: center;.
6. The .update-wrapper class is used to align the update link to the right with text-align: right;.
7. The .update-wrapper a selector is used to style the "update" link with the desired color.

By making these changes, the reminder text will be centered and the update link will be aligned to the right side.