Responsive width of form

Anonymous

#222548

Hi,

I have been trying to make the width of the form adapt to the width of it’s container but couldn’t make it. The website is casos.fen.uchile.cl/casos

For now it looks good but it overflows to the right when I display it on mobile devices.

This is the css I included for the search&filter section:

.searchandfilter > ul > li.sf-field-search input {
padding: 8px 14px 8px 14px;
font-size: 16px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
width: 400px;
font-family: “Roboto”;
font-weight: 400;
border-radius: 4px;
color: #676767;
}

.searchandfilter ul > li:before {
content: none;
}

.sf-input-select {
font-family: “Roboto”;
font-weight: 300;
width: 400px;
height: 45px;
border: 2px solid #ccc;
font-size: 16px;
}

.searchandfilter ul
{
display:block;
text-align: center;
}

Could you give me any advice with the css?

Trevor

#222565

The web address you gave does not seem valid and does not work?

You need to enclose that CSS inside a media query so that it does not apply to mobile, then write more CSS for mobile.

I do not know what point your site goes in to mobile mode, but it would like like this:

@media screen only and (min-width: 1001px) {

// desktop CSS here

}
@media screen only and (max-width: 1000px) {

// mobile CSS here

}

If your site was mobile for 1000px and below

Anonymous

#222571

Thanks for the fast response,

It seems the website can only be seen from inside the faculty network, I’ll reach you once I’ve solved this issue.

I was trying to do it without media queries. I want to take profit of the “column stacking” and set the width of the column of the search&filter box to auto. I’m not sure if it’s a valid approach…

Thanks!

Trevor

#222575

I suspect that the rest of your site uses media queries. It is the only practical way to do it. Just look a the code for your site. Focus on the menu, does it become a mobile toggle bar at some point? If so, use that as your guide. Or, if you have a post grid, when does it convert to single stacked posts?

Anonymous

#222597

Yes, sure it does use media queries to do several things.(I’m using Visual Composer, it must use media queries for the sandwich menu, stacking columns and other things)

Anyway, I prefer to wait till I can show you the website so we can address the issue directly.

You can mark the topic as resolved if you wish to, I can’t tell how much it will take to publish the website outside the faculty network as I depend on other people to do it.

Thank you very much,

Trevor

#222599

Thanks for getting back to me. I will leave it open for you to reply here when you are ready.

Anonymous

#228345

Hi Trevor,

After following your suggestions on media queries and consulting several forum threads on CSS styling I’m pleased with the result: casos.fen.uchile.cl/casos (the site is public now)

I designed a style for smartphones and another for desktops, may be in the future I’ll design another for the tablet intermediate size.

I’ll post the final CSS that worked for me here, in case it’s useful for someone (I assume it’s not the cleanest code and probablly some lines could be ommited 😛 ):

.searchandfilter > ul > li.sf-field-search input {
 padding: 8px 14px 6px 14px;
	font-size: 16px;
	  border: 2px solid #999;
	  overflow: hidden;
	  position: relative;
	width: 210px;
	font-family: "Roboto";
   font-weight: 400;
	border-radius: 4px;
	color: #000000;
	margin: 0px 0px 0px 0px;
}

.searchandfilter ul > li:before {
	content: none;
}

h4 {
   font-family: "Roboto";
   font-weight: 500;
	color: #333;
 }

.sf-input-select {
	padding: 8px 14px 8px 10px;
	font-family: "Roboto";
   font-weight: 400;
		width: 210px;
	
	height: 45px;
	border: 2px solid #999;
	font-size: 16px;
	border-radius: 4px;
	background-position: 100px;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

@media (max-width:767px){
	.searchandfilter > ul > li {
	display:block !important;
	text-align: center;
	margin: auto;
	}}

@media (min-width:768px){
	.searchandfilter > ul > li {
	display:inline-block !important;
	text-align: center;
	}}

.searchandfilter li.sf-field-search {
  width: 30% !important;
}

@media (max-width:767px){
	.searchandfilter li.sf-field-search {
  width: 100% !important;
	}
}

.searchandfilter li.sf-field-tag {
  width: 30% !important;
}

@media (max-width:767px){
	.searchandfilter li.sf-field-tag {
  width: 100% !important;
}
}
	
.searchandfilter li.sf-field-category {
    width: 30% !important;
}

@media (max-width:767px){
	.searchandfilter li.sf-field-category {
    width: 100% !important;
}
}

.filters {
	margin:auto;text-align:center;
}

.comment-content ul>li, .entry-content ul>li {
    list-style: none;
    position: relative;
}

.searchandfilter ul li {
    list-style: none;
    display: block;
    padding: 10px 0;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

Thank you very much for your kind support!

Trevor

#228394

Thanks for letting me know and sharing. I am sure other users will find this useful. I will close this thread for now.

[Author]

Posts