Tagged: 3 Column, responsive
-
AuthorPosts
-
December 20, 2019 at 11:15 am #1168081
Hi there,
I’m using the Modern Tribe Events plugin to pull event featured images to the slider on the homepage of my site. As a result of it being stretched fullwidth it’s forcing the grid layouts to appear in-line and not break as they’re supposed to by the default setting is “Each cell is to be displayed on its own”.
I’ve tried:
@media only screen and (min-width: 600px) {
.responsive #top #wrap_all .av_one_third, .responsive #top #wrap_all.av_one_half {
width: 100% !important;
min-width: 100% !important;
margin-left:0 !important;
}}It didn’t work, but the Footer was fixed by this:
#footer av_one_fourth {
margin-left: 0 !important;
width: 100% !important;
}
My CSS lives in the Customizer >> Additional CSS area. Temp login link attached.
Any help would be appreciated as this is the only issue holding up the site launch.Cheers,
JDecember 21, 2019 at 3:31 pm #1168442December 22, 2019 at 1:20 am #1168539Hi there,
I’d like both the two column row and the three column rows to break into one column. Currently the stay in line and smush really small. I’s like them to break into one image and text below so you can see the image and read the text. I’ve screenshot the row behaviour on mobile phone:
https://photos.app.goo.gl/YXWEiaLfNKVTvTer6December 22, 2019 at 7:51 pm #1168612Hi,
Thanks for the login, I see that you are using the grid rows for your two and three column sections, the grid rows are designed to not break into a single column. Please try using the column elements for this function.Best regards,
MikeDecember 23, 2019 at 9:50 am #1168681So, i’ve removed the grid row and now it looks great on mobile, but now it’s showing up as one column on everything above portrait smartphone as well.
See attached screenshot: https://photos.app.goo.gl/B9Cs4CTFikDZWTZj6Thanks,
J- This reply was modified 4 years, 11 months ago by IdeaZone2550.
December 23, 2019 at 11:47 am #1168706Hi,
I was going to take a look but WordPress says you are working on the page right now, so I didn’t want to “take over” can you please save your work so I can take a look?Best regards,
MikeDecember 23, 2019 at 8:07 pm #1168805Feel free to take over. I’ve saved my work.
Thanks.
December 24, 2019 at 1:50 pm #1168944Hi,
Thank you for the login, first I found that you had this css in your WordPress > Customize > Additional CSS that was changing the columns to 100% width for desktop:.responsive #top #wrap_all .av_one_third, .responsive #top #wrap_all .av_one_half { width: 100% !important; margin-left:0 !important; }
so I commented it out, but the columns were still full-width, after much testing onyour site and my localhost I found that it seems the featured image slider is braking the page, if you remove it the layout corrects.
I’m going to have to test further on my localhost and then submit to the dev team.
Since your site is live you may which to go back to the grid row for now, or use a different slider.
Thank you for your patience.Best regards,
MikeDecember 24, 2019 at 2:59 pm #1168956Hi,
*update*
I found that if the featured image slider’s post off-set is enabled it brakes the layout, so please create a new events category with only the items you want to show right now and then pick that category in the featured image slider so you won’t be using the off-set.
For the off-set you can use “Do not allow duplicate posts on the entire page (set offset automatically)”Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.