- This topic has 29 replies, 4 voices, and was last updated 5 years, 11 months ago by Leo.
-
AuthorPosts
-
February 2, 2017 at 9:12 am #273343TomLead DeveloperLead Developer
Once the class is added, you can do this:
.image-column .inside-grid-column { height: 100%; padding: 0; } .image-column img { height: 100%; width: 100%; }
This will most likely cause stretching of the image if the area is too big. Making your section contained might help, or you might just need to reduce the width of the image column.
February 2, 2017 at 11:37 am #273388johnzoroi forgot to add those classes but i have done so now and added the css tom mentioned. it doesn’t seem to have given me the result i was expecting though
February 2, 2017 at 3:10 pm #273507TomLead DeveloperLead DeveloperHmm, I’m not seeing the classes. Can you make sure they’re added?
February 2, 2017 at 11:16 pm #273678johnzoro[ lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="false" class="image-column"]<img src="https://www.greatestreviews.co.uk/wp-content/uploads/2017/01/badminton-1019110_1920-e1485965446826.jpg" />[/lgc_column][lgc_column grid="50" tablet_grid="50" mobile_grid="100" class="content-column" last="true"] The badminton racket is very personal and important piece of equipment for every serious badminton player. There is a very personal connection between a player and his racket, it is basically an extension of their bodies. It takes some time and a lot of experience for most, if not every badminton player to develop that personal connection with a particular brand of racket. There are factors that must be considered by players in choosing the racket that suits a particular style of play (Defensive or aggressive), and delivers the kind of performance that is required.[ /lgc_column ]' <span style="border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 50px; left: 20px;">Save</span> <span style="border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save</span> <span style="border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save</span>
February 2, 2017 at 11:18 pm #273679johnzorothey are there. I can’t post the code into here as it disappears
I don’t know why i’m getting spans with save at the bottom all the time though
February 2, 2017 at 11:30 pm #273681johnzoroFebruary 2, 2017 at 11:45 pm #273689TomLead DeveloperLead DeveloperFor some reason my browser really caches your website, not sure why it takes so long to clear even after manually clearing it.
My mistake on the CSS, try this instead:
.inside-grid-column.image-column { height: 100%; padding: 0; margin: 0; } .inside-grid-column.content-column { padding: 40px; }
Not sure what’s going on with those span tags with the Save text, but you’ll definitely want to remove them. Maybe another one of your plugins are adding those?
February 3, 2017 at 1:07 am #273712johnzoroafter a bit of googling turns out it was the pinterest button plug in for firefox causing the random span code
February 3, 2017 at 4:51 am #273758johnzoroFebruary 3, 2017 at 4:52 am #273759johnzorolooks like i’m almost there but there’s still a gap on the left and a tiny gap at the bottom which i don’t understand
February 3, 2017 at 11:23 am #273902TomLead DeveloperLead DeveloperAlright, this should be the final working code:
.inside-grid-column.image-column { height: 100%; padding: 0; margin: 0; } .image-column img { height: 100%; } .inside-grid-column.content-column { padding: 40px; } .inside-grid-column.image-column { height: 100%; padding: 0; margin: 0; }
Then, give the section a custom class of: no-padding
That will remove the padding to the left and right: https://docs.generatepress.com/article/sections-overview/#layout
February 4, 2017 at 4:12 am #274104johnzoroit sorta worked but not what i was imagining
thanks for all your help
i also have another problem now lol
on the wilson positive and negatives i’ve tried to make them together but i want the positive half to be all green and the negative half to be all red
any idea how i can accomplish this?
i tried removing the background color for the section then used the grid and added a class to each grid “pro” and “con”
February 4, 2017 at 6:29 am #274120LeoStaffCustomer SupportLooks like you are almost there 🙂
Try adding
height: 100%;
to bothcon
andpro
classes in your CSS.May 14, 2018 at 11:18 am #575436CrisHello
I followed your instructions and it is very cool but I found a problem in some tablets. Attached image of the part that is mismatched when changing the screen size. Do you know of a solution?
https://drive.google.com/open?id=1FEgAVu_k5lfmMVgEteEEudJa3ncbF18i
I did several tests and what makes it work wrong is adding a class inside “Lightweight Grid Columns”. Please help.
Thank you!May 14, 2018 at 2:29 pm #575588LeoStaffCustomer SupportHi there,
Any chance you can start a new topic and link us to your site?
Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.