Видео

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!

Since it was an one-pager, I didn't find it to add great benefit. I would recommend making sure the correct tags are used (nav,...) for accesibility, which is something I did incorrectly here. I also never really liked the fact that the Header Builder always has those 3 columns by default. But there is nothing really wrong or a big reason as to why I didn't use accept for personal preference in this particular case.

@@TinyTechTalksTalks Thanks! Can we look ahead for a full website-build soon?

@@gashumba888 I was recording one but had some health issues and lost some footage so it will come just bit later as planned ;)

@@TinyTechTalks Thank you!

Well, that will depend on project requirements. But if you and your clients are happy with it then that's great!

Thanks for the kind words! Happy to hear it was helpful.

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

Thanks Andrew, and welcome to repeater world 😉!

Hi, thanks for the kind words! I am planning on doing a new full build with some updated techniques and best practices. As for the classes, I guess it really depends. I am not a fan of adding multiple classes when not needed. This is often a problem with utility frameworks where you have classes that only provide one thing like padding, margin, or a color,... if you need to add multiple of these to style one element I personally would recommend writing one custom class that provide all those stylings. Not because it is "wrong" to have a lot of classes on an element but because it is just easier to manage and make changes. However, I do recommend adding styling to classes and not ID's. This was a mistake I made when starting out with Oxygen.

@@TinyTechTalks OMG. I really look forward to that full build. I am a visual learner and that really helps me a lot. As a new user to Oxygen (7months in), I am yet to use the frameworks as I still want to perfect my understanding of the vanilla Oxygen builder. Frameworks with single issue classes bother me as that can also bog down site speed with a massive CSS code. Yes, I also do not like to add styling to ID's (something I noticed was common with Oxygen Builder templates!). Thank you again for sharing your knowledge and I look forward to learning more from you going forward.

no new video mam ?

Thanks for the suggestions!

Nothing fancy really, Quicktime and a USB Condenser Microphone for recording. Premiere Pro for the editing.

Because background images don't have an option for alt text, so no real value for SEO, whereas a real image element with alt text does. That's why I personally do it. But it will depend on the use case of the card and whether or not the image does add value for SEO purposes.

@@TinyTechTalks which in my opinion doesn't, since you have heading and Text rot that

Still adding alt text to important images is a good practice as this also will help with accessibility. But like I said it will depend on the use case of the card and importance of the image. I prefer this method, that's why I used it.

Hi Sourav, I am not very knowledgable about GSAP at the moment myself. But maybe one day in the future I might do some tutorials on it. However maybe have a look at motion.page, they are compatible with oxygen and allow you to visually build quite powerful animations.

@@TinyTechTalks its ok mam

Thank you Suzanne for the kind words! Happy you enjoyed it!

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.

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.

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?

Yes, that should work. But be careful because Gutenberg also allows users to input buttons. As these are also technically links, so you might need to use :not() to exclude Gutenberg buttons and any other link element you don't want this style applied too.

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.

Thank you! And I agree, there are some great other channels with amazing Oxygen content out there!

Hey Martyn, I got caught up with starting my own agency. However with the release of Oxygen 3.9 amazing upcoming release of 4.0, there will be some new content coming soon! Also if you have any request of what you would like to see, feel free to share ;)!