these great, great Oxygen tutorials are raining cats and dogs lately, and I looooove it! It shows how Oxygen works as a learning tool, because the CSS, JS, and WP level of the Oxygen community is growing rapidly IMO
Thank you for this! I have a question... around 15:00 time stamp where we add custom css for object-fit and object-position, I set those parameters directly in the builder as opposed to CSS... is that problematic to do it that way?
When I made this tutorial, I don't think the option for object-fit en object-position was available in the builder. It's not problematic to do it in the builder. However nowadays, I usually don't set any parameter in the builder any more, but put everything in a separate CSS file. It works easier for me when working on bigger sites to see what CSS is applied. But this is more a preference, I don't see anything "wrong" with using the parameters in the builder.
@@TinyTechTalks Thank you so much! I'm trying to get away from custom CSS (though that's always been my go-to) in favor of ACSS. I had to make several adjustments to my settings/styles to get this to work and could not successfully set a vh for the hero section (it made the image extend vertically below the section), so mine is 100% vh. No big deal. Thank you again!
2 года назад
Great tutorial. Thank you for sharing! Any hint on how to make those two grid columns unequal? For example, I want text wrapper to be 30% and the image wrapper 70%.
Hi Dragan, a similar question was asked by Oscar earlier. Like I explained to him, if you want to make it 100% correct a different approach that would require some calculations would be better. If that isn't a great deal, you could use a different sized grid ( like a 1-3 or 2-3 and span the columns) and make some tweaks to get it working. I will need to experiment with this inside of oxygen more myself and see what would be a good solution. If you come up with a different way, feel free share it.
2 года назад
@@TinyTechTalks Thank you. It seems logical to to make the 4 column grid and actually span the div which is the image parent to 3 columns, but then, the image doesn't go to the right hand side edge of the screen, which is the main idea. Definitely need to try other options. Cheers!
@ That's probably because the width of the image is set to 50vw and you are spanning more than half of your view width with the image. Try adjusting that. This is also why it won't be 100% correct because 70vw is not equal to 70% of the page width. Working on a different tutorial atm, but I might put out a new one for this that will work with different sizes in the future.
Make sure you set the width and height and add the object-fit:cover; on the image. If still having a problem you might need to add overflow:hidden to the section. Or there might be something else not setup correctly but hard to tell without a link to check.
Thanks for the brilliant tutorial. Buit I have a question: Presently, its 50-50 between the text content and image. But what if I want the text to take up 60% while the image takes up 40% of the space. How would you do this?
Hi oscar, thank you! To do this "100% correctly" some calculations would be needed maybe even a complete different approach would be more suitable. A quick fix I can think of right now though would be to use a 5 column grid, make the text div takes up 3 columns (using column span) and the image div 2 columns. Make sure the overflow is hidden on the section! Now do know that since we tell our image it needs to be 50vw part of it will be invisible so when setting 50% 50% on your position this will be a bit off. Also this is 60%-40% of your page width not the full screen width. But I hope this helps you a bit. If you find a better solution feel free to share, since we are all here to learn and improve ;)
@@TinyTechTalks Thank you for your detailed response. I'll be sure to experiment and see what works. As you mentioned, a different approach might be more suitable. Maybe with flexbox. Thanks again. Love your tutorials.
As soon as I set max-width to 50vw I get horizontal scrollbar... One fix would be to add 'overflow-x: hidden' to the section but... It's a workaround I think (a popular one)... Weird that you didn't get that horizontal scrollbar. Now I have the dillema... Set the overflow-x to hidden or to fight with relative/absolute blah blah blah...
If you have a link I can see if I can find what is causing this problem. I don't see any issue with having overflow: hidden; on the section, this is in my opinion an acceptable solution. Also did you complete the entire process shown in the video?
@@nicothefreelancer To make it work with the image on the left. You can put the section on position: relative and then the image to position: absolute (top and left set to 0px). And on the mobile breakpoint set the img back to position: relative.
@@nicothefreelancer if they are separate sections it should work? If content is in one section to switch the positions without using absolute positions you will need to do some calculations based on the page-width you set in oxygen. Personally if the content continues on each other and needs be in one section I would opt for a different style as I feel this type of layout really separates the content. But that's my personal opinion ;) if not than use a section for every part.
@@TinyTechTalks this answer, was just what I was looking for, thank you. However, now my text + button is hidden behind the image. Any suggestions to this?
these great, great Oxygen tutorials are raining cats and dogs lately, and I looooove it! It shows how Oxygen works as a learning tool, because the CSS, JS, and WP level of the Oxygen community is growing rapidly IMO
Thank you! And I agree, there are some great other channels with amazing Oxygen content out there!
Very Nice video. Keep more videos coming.....
This was such a helpful, easily understandable and well organised video! Thank you
Thank you Cynthia for sharing this nice tutorial !
Hi Cynthia thank you for this well structured tutorial
Great work
awesome, please make more of such interesting vids
Great explanation, thank you!
Thank you for this! I have a question... around 15:00 time stamp where we add custom css for object-fit and object-position, I set those parameters directly in the builder as opposed to CSS... is that problematic to do it that way?
When I made this tutorial, I don't think the option for object-fit en object-position was available in the builder. It's not problematic to do it in the builder. However nowadays, I usually don't set any parameter in the builder any more, but put everything in a separate CSS file. It works easier for me when working on bigger sites to see what CSS is applied. But this is more a preference, I don't see anything "wrong" with using the parameters in the builder.
@@TinyTechTalks Thank you so much! I'm trying to get away from custom CSS (though that's always been my go-to) in favor of ACSS. I had to make several adjustments to my settings/styles to get this to work and could not successfully set a vh for the hero section (it made the image extend vertically below the section), so mine is 100% vh. No big deal. Thank you again!
Great tutorial. Thank you for sharing!
Any hint on how to make those two grid columns unequal? For example, I want text wrapper to be 30% and the image wrapper 70%.
Hi Dragan, a similar question was asked by Oscar earlier. Like I explained to him, if you want to make it 100% correct a different approach that would require some calculations would be better. If that isn't a great deal, you could use a different sized grid ( like a 1-3 or 2-3 and span the columns) and make some tweaks to get it working. I will need to experiment with this inside of oxygen more myself and see what would be a good solution. If you come up with a different way, feel free share it.
@@TinyTechTalks Thank you. It seems logical to to make the 4 column grid and actually span the div which is the image parent to 3 columns, but then, the image doesn't go to the right hand side edge of the screen, which is the main idea. Definitely need to try other options. Cheers!
@ That's probably because the width of the image is set to 50vw and you are spanning more than half of your view width with the image. Try adjusting that. This is also why it won't be 100% correct because 70vw is not equal to 70% of the page width. Working on a different tutorial atm, but I might put out a new one for this that will work with different sizes in the future.
Nicely done thank you
When I place an image, the image is larger than the div. How do I keep it within the div and not have this sizing issue?
Make sure you set the width and height and add the object-fit:cover; on the image. If still having a problem you might need to add overflow:hidden to the section. Or there might be something else not setup correctly but hard to tell without a link to check.
Thanks for the brilliant tutorial. Buit I have a question: Presently, its 50-50 between the text content and image. But what if I want the text to take up 60% while the image takes up 40% of the space. How would you do this?
Hi oscar, thank you! To do this "100% correctly" some calculations would be needed maybe even a complete different approach would be more suitable. A quick fix I can think of right now though would be to use a 5 column grid, make the text div takes up 3 columns (using column span) and the image div 2 columns. Make sure the overflow is hidden on the section! Now do know that since we tell our image it needs to be 50vw part of it will be invisible so when setting 50% 50% on your position this will be a bit off. Also this is 60%-40% of your page width not the full screen width. But I hope this helps you a bit. If you find a better solution feel free to share, since we are all here to learn and improve ;)
@@TinyTechTalks Thank you for your detailed response. I'll be sure to experiment and see what works. As you mentioned, a different approach might be more suitable. Maybe with flexbox. Thanks again. Love your tutorials.
As soon as I set max-width to 50vw I get horizontal scrollbar... One fix would be to add 'overflow-x: hidden' to the section but... It's a workaround I think (a popular one)... Weird that you didn't get that horizontal scrollbar. Now I have the dillema... Set the overflow-x to hidden or to fight with relative/absolute blah blah blah...
If you have a link I can see if I can find what is causing this problem. I don't see any issue with having overflow: hidden; on the section, this is in my opinion an acceptable solution. Also did you complete the entire process shown in the video?
@@TinyTechTalks yeah, I did it 1:1 and got this horizontal scrollbar. Weird that you didn't have to put overflow: hidden. :o
this doesnt work if putting the image to left?
do you know why?
@@nicothefreelancer To make it work with the image on the left. You can put the section on position: relative and then the image to position: absolute (top and left set to 0px). And on the mobile breakpoint set the img back to position: relative.
Thank you. But unfortunately it does not work if im using the layout as a content. This is my layout.
content / img
Img / content
Content / img
@@nicothefreelancer if they are separate sections it should work? If content is in one section to switch the positions without using absolute positions you will need to do some calculations based on the page-width you set in oxygen. Personally if the content continues on each other and needs be in one section I would opt for a different style as I feel this type of layout really separates the content. But that's my personal opinion ;) if not than use a section for every part.
@@TinyTechTalks this answer, was just what I was looking for, thank you. However, now my text + button is hidden behind the image. Any suggestions to this?