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!

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,

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!