I'm resizing a card with media query but the labels I've created inside it gets weird because of the gap from the parent div. I know I can fix it changing the gap of the parent div and the widht and height of the labels, but I'm not beeing able to do that.
It stays like this
I want it to be like this
I'm using SASS and bootstrap 5.3.0.
This is a challenge from Frontend Mentor btw.
HTML:
<div class="card" id="submitCard">
<div class="star"><img src="images/icon-star.svg" alt=""></div>
<p class="cardTitle">How did we do?</p>
<p class="cardDescription">Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p>
<form id="ratingForm">
<div class="inputs">
<input type="radio" name="rating" id="rating1" value="1"></input>
<label for="rating1">1</label>
<input type="radio" name="rating" id="rating2" value="2"></input>
<label for="rating2">2</label>
<input type="radio" name="rating" id="rating3" value="3"></input>
<label for="rating3">3</label>
<input type="radio" name="rating" id="rating4" value="4"></input>
<label for="rating4">4</label>
<input type="radio" name="rating" id="rating5" value="5"></input>
<label for="rating5">5</label>
</div>
<button class="submitBtn">Submit</button>
</form>
</div>
CSS:
#submitCard{
#ratingForm{
color: var(--text-color);
margin-top: 10px;
.inputs{
display: flex;
justify-content: space-between;
gap: 20px;
label{
display: grid;
place-content: center;
background-color: var(--btn-color);
border-radius: 50px;
width: 50px;
height: 50px;
padding-top: 5px;
}
input[type="radio"]{
display: none;
&:checked + label {
background-color: var(--btn-selected-color);
color: var(--white);
}
&:hover + label{
background-color: var(--primary);
color: var(--white);
cursor: pointer;
}
}
}
}
}
Media query:
#media (max-width: 430px){
.card{
width: 360px;
padding: 25px;
border-radius: 15px;
}
#submitCard {
#ratingForm{
.inputs {
gap: 0;
label{
width: 45px;
height: 45px;
}
}
}
}
}
Well.. The thing is: I placed my media query before the styles I was trying to change. I guess i'm going back to practice. 😂🤡
I found the answer by this post: Css id's don't change on media queries
golang template how to convert string to html，i use {{.links|safe}} but get error message
function "safe" not defined
and How to optimize the code, I just started learning golang。
Or you can write a data structure if you render a structure in templat, such as Button struct.
Are there more examples of template usage?
button := []Button{
{Name: "admin", Link: "/system/"},
{Name: "index", Link: "/"},
}
to html
layer.open({
type: 1
,title: false
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro'
,btn: ["admin","index"]
,btnAlign: 'c'
,moveType: 1
,content: '<div style="padding: 50px; line-height: 22px;font-weight: 300;"> layer.msg(安装成功)</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({href: '/system/',target: '_blank'});btn.find('.layui-layer-btn1').attr({href: '/',target: '_blank'});
}
});
views code
type Button struct {
Name string
Link string
}
func Install(ctx iris.Context) {
fmt.Println("........")
if dao.DB != nil {
ctx.Redirect("/")
return
}
templateName := "install.html"
button := []Button{
{Name: "admin", Link: "/system/"},
{Name: "index", Link: "/"},
}
links := ""
var btns []string
i := 0
for _, btn := range button {
links += fmt.Sprintf("btn.find('.layui-layer-btn%v').attr({href: '%v',target: '_blank'});", i, btn.Link)
btns = append(btns, btn.Name)
i += 1
}
data := iris.Map{
"message": "安装成功",
"btns": btns,
"links": links,
}
ctx.View(templateName, data)
return
}
template
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始化安装</title>
<style>
.container {
padding: 30px;
}
.title {
text-align: center;
padding: 20px;
}
.layui-form {
max-width: 600px;
margin: 50px auto;
padding: 20px;
max-width: 600px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.layui-form-item {
display: flex;
margin-bottom: 20px;
align-items: top;
}
.layui-form-label {
padding: 6px 0;
width: 100px;
}
.layui-input-block {
flex: 1;
}
.layui-input {
box-sizing: border-box;
width: 100%;
padding: 2px 10px;
border: 1px solid #eaeaea;
border-radius: 4px;
height: 36px;
font-size: 15px;
}
input:focus,
textarea:focus {
outline: 1px solid #29d;
}
.layui-form-mid {
padding: 3px 0;
}
.layui-aux-word {
color: #999;
font-size: 12px;
}
.layui-btn {
cursor: pointer;
border-radius: 2px;
color: #555;
background-color: #fff;
padding: 10px 15px;
margin: 0 5px;
border: 1px solid #eaeaea;
}
.layui-btn.btn-primary {
color: #fff;
background-color: #3f90f9;
}
.submit-buttons {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">安企CMS(AnqiCMS)初始化安装</h1>
<form class="layui-form" action="/install" method="post">
<div>
<div class="layui-form-item">
<label class="layui-form-label">数据库地址</label>
<div class="layui-input-block">
<input type="text" name="host" value="localhost" required placeholder="一般是localhost"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库端口</label>
<div class="layui-input-block">
<input type="text" name="port" value="3306" required placeholder="一般是3306" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库名称</label>
<div class="layui-input-block">
<input type="text" name="database" value="anqicms" required placeholder="安装到哪个数据库"
autocomplete="off" class="layui-input">
<div class="layui-form-mid layui-aux-word">如果数据库不存在，程序则会尝试创建它</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库用户</label>
<div class="layui-input-block">
<input type="text" name="user" required placeholder="填写数据库用户名" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库密码</label>
<div class="layui-input-block">
<input type="password" name="password" required placeholder="填写数据库密码" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">后台用户名</label>
<div class="layui-input-block">
<input type="text" name="admin_user" value="admin" required placeholder="用于登录管理后台"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">后台密码</label>
<div class="layui-input-block">
<input type="password" name="admin_password" minlength="6" maxlength="20" required
placeholder="请填写6位以上的密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">网站地址</label>
<div class="layui-input-block">
<input type="text" name="base_url" value="" autocomplete="off" class="layui-input">
<div class="layui-form-mid layui-aux-word">
指该网站的网址，如：https://www.anqicms.com，用来生成全站的绝对地址
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block submit-buttons">
<button type="reset" class="layui-btn">重置</button>
<button class="layui-btn btn-primary" type="submit">确认初始化</button>
</div>
</div>
</form>
</div>
</body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
{{ if .message }}
{{ $length := len .btns }}{{ if eq $length 0 }}
layer.msg({{.message}})
{{else}}
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
,btn: {{.btns}}
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,content: '<div style="padding: 50px; line-height: 22px;font-weight: 300;"> layer.msg({{.message}})</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
{{.links}}
}
});
{{end}}
{{ end }}
</script>
</html>
generate html
layer.open({
type: 1
,title: false
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro'
,btn: ["admin","index"]
,btnAlign: 'c'
,moveType: 1
,content: '<div style="padding: 50px; line-height: 22px;font-weight: 300;"> layer.msg(安装成功)</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
"btn.find('.layui-layer-btn0').attr({href: '/system/',target: '_blank'});btn.find('.layui-layer-btn1').attr({href: '/',target: '_blank'});"
}
});
i want to result
layer.open({
type: 1
,title: false
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro'
,btn: ["admin","index"]
,btnAlign: 'c'
,moveType: 1
,content: '<div style="padding: 50px; line-height: 22px;font-weight: 300;"> layer.msg(安装成功)</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({href: '/system/',target: '_blank'});btn.find('.layui-layer-btn1').attr({href: '/',target: '_blank'});
}
});
Change size on hover of one flex element with overlapping another.
Like this
You can use CSS transform property like this
selector {
... /* others styles */
transition: 0.4s;
}
selector:hover {
transform: scaleY(1.2)
}
refer https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()
<div class="flex justify-content-evenly align-items-start flex-wrap">
<div class="relative container w-full w-3 h-22rem">
<div class="item-container grid inline absolute top-0 left-0">
<div class="text-center col">
<img class="w-full" src="assets/images/buket2.png" alt="buket">
</div>
<div class="col">
<h5 class="m-0">Bouquet 117 (21 gerberas)</h5>
<p class="text-400 text-sm font-medium mt-1">Fresh flowers</p>
<p class="font-bold">€83.49 EUR</p>
</div>
<button label="Add to cart" icon="pi pi-shopping-cart">
</button >
</div>
</div>
.item-container {
border: 1px solid #E7E7E7;
box-sizing: border-box;
border-radius: 10px;
margin: 15px 0 15px 0;
padding: 20px 20px 0 20px;
background-color: white;
&:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
z-index: 2;
.buy-btn {
display: block !important;
}
}
}
Why this image is not centrally align?
<div style=" width:70%; margin:0 auto; padding:0.2%; border:1px solid #000; ">
<img src="images/social.png" width="227" height="68" style="border:1px solid #000;
border-radius:5px; width:auto; margin:0 auto; display:block;" /></div>
Its the simple question. Any quick solution please.
Thanks,
Its simple try using line height property and set its value in px equivalent to the height of the container e.g
//container
<div class="container" align="center">
<img src="http://static.adzerk.net/Advertisers/46a9844d6e504212a85bc72ddd7dd829.png" width="40" height="40">
</div>
//css
.container{
width:200px;
height:200px;
line-height:200px;
border:1px solid #666;
margin:0 auto;
}
I have the following HTML code:
<section class="gallery">
prev
next
<div class="holder">
<ul id="slider">
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
</ul>
</div>
</section>
And the following js:
$(document).ready(function(){
$('#slider').cycle({
fx:'scrollHorz',
timeout: 5000,
prev:'#link-prev',
next: '#link-next'
})
//$(".form-contact form").validate();
})
This works fine, but it shows just one picture, and if I want to see the following I click next, and if I want to see the previous, I click prev. How can I show more than one picture per transition?
Basically, like this example: scroll, but showing more than one picture per transition...
EDIT: The actual HTML I have when trying to have two pictures in each slide is this one:
<section class="gallery">
prev
next
<div class="holder">
<ul id="slider">
<div>
<img src="assets/content/pages/carrousell/UrbanFlame.jpg" alt="#" width="306" height="240" />
<img src="assets/content/pages/carrousell/TannourineRestaurant.jpg" alt="#" width="306" height="240" />
</div>
<div>
<img src="assets/content/pages/carrousell/PanchoVillaTaqueria.jpg" alt="#" width="306" height="240" />
<img src="assets/content/pages/carrousell/LaLanterna.jpg" alt="#" width="306" height="240" />
</div>
</ul>
</div>
</section>
And the CSS is this one:
.gallery .holder{
border-radius: 10px;
position:relative;
padding:4px 0 4px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.gallery #link-prev,
.gallery #link-next{
position:absolute;
width:47px;
height:83px;
text-indent:-9999px;
overflow:hidden;
top:75px;
z-index:99999;
background:url(navigati.png) no-repeat;
}
.gallery #link-prev{left:-19px;}
.gallery #link-next{right:-19px;}
.gallery #link-next{background-position:-48px 0;}
.gallery h3{
color:#33638b;
font-size:18px;
line-height:21px;
margin:0 0 1px;
text-align:center;
}
#slider{
padding:0;
width:306px;
margin: 0 auto;
}
#slider li{
list-style:none;
text-align:center;
color:#FFFFFF;
font-size:14px;
line-height:17px;
padding:0px 0 0;
width:306px;
}
#slider img{
position:relative;
}
#slider span{
width:286px;
display:block;
padding:20px 10px;
background:url(../images/slider_span_bg.jpg) repeat-x left top; height:18px;}
#slider a{color:#33638b; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:18px;}
What's inside your <!-- picture link !--> blocks?
According to the Cycle documentation (and samples) the markup should be like this:
<div id="slider">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<!-- ... -->
</div>
EDIT:
Two pictures in one transition
var curElement = null;
$('#s1').cycle({
fx: 'scrollHorz',
prev: '#prev1',
next: '#next1',
timeout: 0,
after: function(currSlideElement, nextSlideElement, options, forwardFlag)
{
if (forwardFlag === 1 && (currSlideElement != curElement || curElement == null))
{
curElement = nextSlideElement;
$("#next1").trigger('click');
}
else if ( forwardFlag === 0 && (currSlideElement != curElement || curElement == null))
{
curElement = nextSlideElement;
$("#prev1").trigger('click');
}
}
});
EDIT 2
The problem is a #slider style. Set its width to f.e. 620px
#slider{
padding:0;
width:620px;
margin: 0 auto;
}
I'm not sure that the Cycle plug-in will handle that without editing the source.
It looks like this option could be useful though:
onPrevNextEvent: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
It seems like you should be able to trigger a next or prev click onPrevNextEvent.
Something like this:
$('#slider').cycle({
fx:'scrollHorz',
timeout: 5000,
prev:'#link-prev',
next: '#link-next',
onPrevNextEvent: function(isNext) {
if(isNext) {
$('#link-next').trigger('click');
} else {
$('#link-prev').trigger('click');
}
}
})