Widgets and widget area too large
-
Trying to adjust the size of my widgets, I currently have instagram and a link to yelp. When viewed on desktop the widget area isn’t huge, but I would prefer that it be smaller. On mobile devices, the widget area at the bottom of the main page is quiet large, AND the widgets display one on top of the other instead of side by side. I can adjust the size of the widget area alone, but cannot get the widgets themselves to resize. Adjusting the area alone leaves it messed up (as can currently be seen with the css I have used .widget-area .wrap {max-height: 300px;}. Any help would be appreciated.
The blog I need help with is: (visible only to logged in users)
-
Hi there,
I am not totally sure if this will work but just try to adjust the Image of the Instagram Widget using the following code, Work around the max-width percentage to suit your need best.
You could try this code in your Custom CSS.wpcom-instagram-columns-1 img { margin: 0 1% 5px; max-width: 45%; }Also about the Yelp, How have you added the Widget, have you linked an Image to your Yelp profile? If so in the Widget you can manage the height and width of the image.
Could you help me understand of your Yelp widget too, so could help you further. Let me know how it goes..!
Hope to hear soon.Regards
-
That code does help shrink instagram. The widget is just an image widget, so it has a height and width change. But I don’t know that just changing that would allow me to place the two widgets side by side. I will try and reply back.
-
Yeah, so just changing the size in the widget wouldn’t really work because it shows up large on mobile still.
-
Hi again,
So glad the Instagram worked, ok , so now to try to shrink them equally you can try this , just keep the Instagram code handy and try using this
You can try the width dimension as per your need.footer .widget-area a img { width: 50%; }Let me know, how it goes. Or we can get the staff reverting.
Regards
-
Sizes are much better, and they look a bit more uniform. Only issue now would be to save some space on mobile by having them side by side like they are when viewed on desktop. Other than that, this is a major improvement!
-
Hi @wildhorizonscrossfit, add this at the bottom of your custom CSS.
@media screen and (max-width: 959px) { .widget-column { max-width: 48%; display: inline-block; } .widget { max-width: 100%; } footer .widget-area a img { max-width: 100%; width: 100%; } }I would remove the following as it is causing the images to overlap the footer at the very bottom (black band).
.widget-area .wrap { max-height:300px } -
Let’s see, still looks like on the mobile devices I have checked that the widgets are still stacked one on top of the other.
-
Hi there, I added the code I gave directly to your site at Customize > CSS, and then viewed your site on my iPhone 6s Plus and this is what I saw: https://cloudup.com/cPvhjmFSJIB
What phone, version of the OS, and mobile browser are you not seeing that on?
I’ve left the code I gave saved in your CSS.
You may want to clear your mobile browser cache and then view your site again.
-
-
- The topic ‘Widgets and widget area too large’ is closed to new replies.
WordPress.com Forums 