Docs

[venya]

Hello,

I’m trying to format some cornerstone sections on my home page to fit better in mobile landscape view. This is all a little tricky, so I did my best to outline everything.

They are 3 different parts of the homepage that I would like to adjust for mobile landscape: Latest publications, Multimedia and News.

1. The first part, Latest publications has 3 different versions (sections)

I did this because mobile/tablet view led to uneven/incomplete pairs (ie blank spaces between rows), and so created different versions with an even number of columns to remove the spaces. Everything is working pretty much as I would like now, except mobile landscape.

In desktop the products are in 5 columns. In mobile they were originally all in 1 column. I wanted them 2×2 and got it working with the code below.

@media (max-width:767px){
.page-id-3899 .x-column.x-sm.x-1-5 {
width: 46%;
float: left;
margin-right: 4%;}
}

I would like to get 4 per row in mobile landscape. Since section 1 (catalog) has 5 products per row, that would again result in an extra space, so my thinking is I would have to use section 3 (4 columns) for mobile landscape.

Section 1 (Catalog): Visible on XL & L – Has products in 5 columns
Section 2 (Catalog Mobile): Visible on SM & XS –I think has produts in 5…
Section 3 (Catalog Tablet): MD — Has products in 4 columns.

Maybe I’m making all more complicated in my head than it needs to be. Basically, I would like everything to remain formatted as is, but change mobile landscape to have 4 products per row on the homepage.

2. The next part is Multimedia. Currently mobile landscape has 1 post per row (5 total). In tablet portrait view I have the first video larger, and the next 4 smaller. Can I do the same for mobile view landscape where the first is large and the next are 2×2?

3. The next section is news. That one is a bit simpler as there are 4 posts. Can I get those to appear 2×2 on mobile landscape?

4.. On my custom 404 page I’m trying to make the following changes.
a. Increase the height of a search bar
b. Format font style
c. Format search input box font (the text “search” that is greyed out, before typing).

When editing in cornerstone, the bar looks close to how I would like, but on a live page the box is tiny and font is wrong style&color.

Many thanks!

[venya]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in!

#1] You need to update your code and use this instead:

@media (max-width:767px){
 .page-id-3899 .x-column.x-sm.x-1-5 {
   width: 48%;
   float: left;
   margin-right: 4%;
 }

 .page-id-3899 .x-column.x-sm.x-1-5:nth-child(2n) {
   margin-right: 0;
 }
}

I would suggest that you use the Essential Grid in displaying your products. With Essential grid, you will have more option and controls on how the grid items will be displayed on different screen size. To know more about Essential Grid, please check it here: https://community.theme.co/kb/integrated-plugins-essential-grid/

#2-#3] I guess using the grid plugin will be able to accomplish anything that you have in mind.

#4] To format the search field in your custom 404 page, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-search-shortcode.hr-404search .search-query {
    font-size: 20px;
    font-family: Arial, serif;
    color: red;
}

.x-search-shortcode.hr-404search .search-query::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
.x-search-shortcode.hr-404search .search-query::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
.x-search-shortcode.hr-404search .search-query:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
.x-search-shortcode.hr-404search .search-query:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Hope this helps.

[Author]

Posts