Alignment of multiple widget with multuple items (picture + text) - Support

Tagged: enfold, header, multiple widgets

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts

October 26, 2020 at 5:20 pm #1255784

Hi team,
I’ve some issues with a “huge” topic for my header area, working with widgets.
I’ve a sketch how it should look like –> https://imgur.com/CAZUK4p

The big issue is, that the header worked fine without the images, but after I added them everything was broken. Currently I really don’t know how to call them and align them next to the text.

What was done by me so far?
1. I added the following code to functions.php

add_action( 'ava_before_bottom_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
	dynamic_sidebar( 'header-two' );
	dynamic_sidebar( 'header-three' );
	dynamic_sidebar( 'header-four' );
}

2. I created those 4 widgets (3 of them including a picture + text)
3. I customized them with some CSS in the file “custom.css”, as you can see below. (for different devices)


/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 2560px) 
{

	#header .widget:nth-child(3) {
	  left: 40%;
	  right: auto;
	  padding-top: 2%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(4) {
	  left: 60%;
	  right: auto;
	  padding-top: 2%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(5) {
	  left: 80%;
	  right: auto;
	  padding-top: 2%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(6) {
	  left: 35%;
	  right: auto;
	  padding-top: 4%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget p {
	  line-height: 10px;
	  font-size: 40px !important;;
	}

	#header .widget {
	  position: absolute; 

	}
}

@media only screen and (min-width: 1440px) 
{

	#header .widget:nth-child(3) {
	  left: 25%;
	  right: auto;
	  padding-top: 2%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(4) {
	  left: 50%;
	  right: auto;
	  padding-top: 2%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(5) {
	  left: 75%;
	  right: auto;
	  padding-top: 2%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(6) {
	  left: 25%;
	  right: auto;
	  padding-top: 5%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget p {
	  line-height: 10px;
	  font-size: 14px !important;;
	}

	#header .widget {
	  position: absolute; 

	}
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) 
{

	#header .widget:nth-child(3) {
	  left: 25%;
	  right: auto;
	  padding-top: 3%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(4) {
	  left: 50%;
	  right: auto;
	  padding-top: 3%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(5) {
	  left: 75%;
	  right: auto;
	  padding-top: 3%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(6) {
	  left: 25%;
	  right: auto;
	  padding-top: 8%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget p {
	  line-height: 10px;
	  font-size: 12px !important;;
	}

	#header .widget {
	  position: absolute; 

	}
}

/*
Tablet Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (min-width: 768px) and (max-width: 1023px) 
{
	#header .widget:nth-child(3) {
	  left: 30%;
	  right: auto;
	  padding-top: 3%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(4) {
	  left: 55%;
	  right: auto;
	  padding-top: 3%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(5) {
	  left: 77%;
	  right: auto;
	  padding-top: 3%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget:nth-child(6) {
	  left: 30%;
	  right: auto;
	  padding-top: 9%;
	  position: absolute;
	  top: -25%;
	  transform: translate(-0%);
	  z-index: 999999;
	}

	#header .widget p {
	  line-height: 10px;
	  font-size: 10px !important;;
	}

	#header .widget {
	  position: absolute; 

	}
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
	.widget { 
		display: none !important;
		}

4. At least I added each icon to the text widget it belongs to. So three of four items have 1 picture and 1 text item within one custom widget.
5. Now the header is totally broken :/

Maybe you have some hint for me how to set everything as needed in the sketch picture.

Thank you and best regards,
Apflbutzn

This topic was modified 4 years, 1 month ago by apflbutzn.

October 29, 2020 at 9:28 am #1256639

apflbutzn

Participant

Hi Team,

Do you have any update in this post? :/

Best regards

October 29, 2020 at 5:53 pm #1256828

Yigit

Keymaster

Hi,

– I commented out all of your custom CSS code in custom.css file and added following code to Quick CSS

#header .widget {
    position: absolute;
    right: 5%;
}
#header .textwidget {
    display: inline-flex;
    flex-wrap: wrap;
}
.header-4 {
    width: 100%;
}

– I edited your widgets and put them all into 1 custom HTML widget and added custom classes for better targeting elements.
– I edited your code in functions.php file and chose to display only 1 header widget.

Please take over to do the fine tuning :)

Best regards,
Yigit

October 30, 2020 at 12:41 pm #1257033

apflbutzn

Participant

Hi Yigit,

thank you for all the changes which were made by you. There are just a view questions:

1. Why is it better to right the custom css into “Quick CSS” instead of custom.css?
2. How and where did you exactly add the icons from http://fontello.github.io/entypo/demo.html. Is it in the custom html widget code?
3. For responsivness I need to add different media queries, correct? Or is there a better solution with Enfold? Currently it is not responsive, the widget overlaps with the company logo by downsizing the page.
4. Is there a possibility for “call to action” stuff, like by clicking on the e-mail icon, the user can directly send an e-mail?
5. How can I align the text next to the icon, because currently the second line always starts directly below the icon? (if it is not clear I can add a screenshot)

Thank you very much & best regards,
Apflbutzn

This reply was modified 4 years, 1 month ago by apflbutzn.

November 3, 2020 at 2:34 pm #1258004

Yigit

Keymaster

Hi Apflbutzn,

1- I simply prefer it for ease of access, no other reason :)

2- I created a page and the icons I would like to use, then on frontpage I inspected elements and copied HTML of icons and simply pasted them inside widget – https://imgur.com/a/rp4OHur

3- Yes, that is correct. If you need help with something specific, please post a screenshot and we will gladly help.

4- Yes, please edit your widget and wrap your icon with following HTML


<a href="mailto: (Email address hidden if logged out) "> HTML of icon here </a>

5- I edited your widget once again and added additional HTML for better targeting and then added following code to bottom of Quick CSS field

.widget-icon {
    float: left;
}

Best regards,
Yigit

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.