this line inserted directly into the html is causing the thumbnail to have compromised resolution. I looked for some way to launch a css to overlay this code but I can’t find any way. Can someone help me?

In the “element style” tab, I would like to display this custom field instead of displaying the extract of my project.

Does anyone know how to do this ?

ANY ONE OUT THERE, I NEED DESPERATE HELP!!! This issue has costed me a lot of time and frustration, so I kindly ask for immense assistance!!! If I can use a real life analogy, my outcry is equivalent to an Amber Alert!

First off, let me get this out of the way. All my plugins are up to date. I am running Astra theme with a Brizy page builder. I also installed ninja forms and created a form on this page: https://cubitize.com/acquisition-request-form/. I used Astra theme as the default template since Brizy is not compatible.

Please note, my problem still persists with the default WordPress 2019 theme enabled, so it’s not an Astra theme specific issue.

I need your aggressive help. I have spent the last two days with no success trying to figure out why I can’t style my select images field.

Basically, I am trying to get the 5 column avatars section on this page: https://cubitize.com/acquisition-request-form/ to look exactly like the avatars on this page: https://cubitize.com/avatars/. The second link, I used Brizy to create the page. I don’t care about the colors and borders for now. I only care about having 5 columns on non-mobile devices and 2 on mobile devices.

If you go to the cubitize.com/avatars link above and open up developer tools, everything adjusts friendly on all devices. For example: for 768 x 1024 tablets, notice how there are three avatars per row. For 1024 x 768 and above devices, there are 5 columns or avatars per row. For 767 and below devices, mobile phones display 2 avatars per row. And for some larger cell phones with a horizontal width greater than 768, you get 3 avatars per row.

So, this is exactly what I want for this link https://cubitize.com/acquisition-request-form/ but for the life of me I can’t figure it out. When you go to this link, notice how Aditi (the second avatar) is zoomed out or pushed back as well as Brian and Broddie avatars. The columns don’t even look one bit even, though these are the same exact avatars used from the cubitize.com/avatars page. I didn’t crop or change any of the image dimensions.

What’s even worse is these avatars look even more messed up on cell phones and I don’t know the code to use to display 2 columns as opposed to 5.

Even though, I used Ninja Forms to create the acquisition request form page, I confirmed with them, that it is a theme/Wordpress specific issue.

When I inspected the problematic page, I noticed there is an HTML element called:
<ul aria-describedby=”nf-error-35_2″ style=”display:grid;grid-row-gap: 5px;grid-column-gap: 5px;”>

If I change the display:grid to display:flex in the HTML code above, the columns width adjusts correctly and evenly on non-mobile devices. However, the problematic columns still appear on mobile devices only this time with uneven “up and down” avatar titles (e.g. the avatar names are not evenly sitting on one line like in the grid display).

Please look at the short video clip:

One other important note worth mentioning. It seems like everything is being dictated by the element.style { Javascript code. Please take a look of the screenshot to get a better visual of what I mean:
https://drive.google.com/open?id=1PKRiobA_EXb8G8ZUq4uDCvfiWj72xUhp

This makes me think again, it’s a theme/Wordpress related issue if I am not mistaken.

I know how to add CSS code in Appearance > Customize > Additional CSS and I know I need to add a @media (min-width: xxpx) and (max-width: xxpx){ for various devices to make the columns mobile friendly. But I don’t know how to override the element.style { since that’s not CSS and takes precedence over any CSS code. I don’t even know how to make for the most part 2 columns on mobile devices and 5 on non-mobile devices.

So, to recap, at the end of the day, I just need to know the right CSS codes to use to make this page https://cubitize.com/acquisition-request-form/ look EXACTLY like https://cubitize.com/avatars/ including on all mobile devices. This includes the code to make 2 columns on certain screen sizes and 5 and others.

Thank you so much for taking the time to read this lengthy message and offering any assistance. I greatly appreciate your valuable time!

when i change “padding-top: 56.24% !important; ” to “padding-top: 1% !important;” i can see exact thing i want. pls tell me how to change that padding top in wordpress or remove that padding.
i cant share link for the page which i am working
pls help.

I used Developer tools to add Custom CSS to the top paragraph that begins, “Please note..” and I successfully changed the font using:

.departure_section {
clear: left;
font-family: cabin;

The paragraph below it that begins, “For example..” seems ruled by a different class. I tried using:

element.style {
font-family: cabin !important;
}

…as Dev Tools showed, but after saving that in Custom CSS, it’s impossible to make the change stick! Please let me know if you have a fix I can use.

Thanks much!
Mari

I’ve recently purchased the Stockholm theme from Themeforest and I’ve tried to customize the Viggo version to show non-cropped versions of my images, instead of cropped versions with a 500×500 dimension or some multiplication of those dimensions.

I almost succeeded in doing what I want. The images in the grid are a little squished, vertically: https://screencast.com/t/caLRe8soFTN

I tried addressing this with the Theme support at themeforest, but they’re saying it’s too much custom work and therefore isn’t included in their support. I really like the theme otherwise so I’d like to solve this anyway.

The process is as follows: I adapt the functions.php file so when I regenerate the thumbnails, it uses the aspect ratios I want:
`add_image_size( ‘portfolio_masonry_regular’, 790, 520, true );
add_image_size( ‘portfolio_masonry_tall’, 756, 1000, true );
add_image_size( ‘portfolio_masonry_large’, 1549, 1040, true );`

Then the masonry grid looks at all the posts in the portfolio category, takes the appropriate “crop” for that featured image (so in the case of the image of the Deer, it would take the masonry_tall thumbnail) and displays it in the masonry grid.

The aspect ratio of my native image is around 1.3. The aspect ratio of the displayed image is around 1.5. So my conclusion is: the regenerating of the thumbnails is going fine, it’s the placing it in the grid and then resizing it that’s not going well for some reason. Looking at the code, the standard class that the image uses (.projects_masonry_holder .image_holder img) has a strikethrough auto height, and is instead replaced by

element.style {
    height: 416px;
}

From some googling I gather it’s either inline coding or javascript, which seems to want this image to be 416px high (at full resolution, it does scale down when the window is smaller), regardless of what other code is implemented. I’ve been looking through the code a bit but I haven’t found anything. Does anyone know how I can solve this? Am I wrong, is this not javascript or inline coding? Can I override it by putting height: auto !important; in the right class? I found this code in the default.min.js file (I think):

function resizeMasonry(e)
{
	"use strict";var t=jQuery(window);if($j(".full_width").length)
	portfolio_width=$j("body").hasClass("vertical_menu_enabled")&&$window_width>1e3?t.innerWidth()-260:t.innerWidth(),e.hasClass("masonry_extended")&&(portfolio_width-=60);
	else
	{var i=e.closest(".container_inner");
	portfolio_width=i.has(".column_inner").length?e.closest(".column_inner").innerWidth():i.innerWidth(),e.hasClass("masonry_extended")&&(portfolio_width+=60)}e.width(portfolio_width);
	var o=5;
	portfolio_width>1600?o=5:1600>=portfolio_width&&portfolio_width>1300?o=4:1300>=portfolio_width&&portfolio_width>1e3?o=3:1e3>=portfolio_width&&portfolio_width>480?o=2:480>=portfolio_width&&(o=1),e.hasClass("masonry_extended")&&(portfolio_width>1600?o=4:1600>=portfolio_width&&portfolio_width>964?o=4:964>=portfolio_width&&portfolio_width>728?o=3:728>=portfolio_width&&portfolio_width>540?o=2:540>=portfolio_width&&(o=1));
	var n=e.find('article[class*="default"]:first img').height(),a=e.find('article[class*="default"]:first img').height(),s=t.innerWidth()>480?2:1;
	e.hasClass("masonry_extended")&&(n+=30,e.find('article[class*="large_width"] img').css("height",a)),e.find('article[class*="large_width_height"] img, article[class*="large_height"] img').css("height",n*s),e.isotope({masonry:{columnWidth:portfolio_width/parseInt(o)
	}
	})
	}

Looks to me like this is the code causing the resizing on the page, but I’m not sure what elements affect the height of the image.

Thanks!

New to the forum and did a quick search on how to work with the element.style info in Chrome’s developer tool. I just can’t seem to find the specific element I am looking for so I was hoping someone could help me pinpoint it.

I want to change the specific H2 title of my WooCommerce shop at ilovetennis.nl/wordpress/index.php/shop. I found out it can be overwritten via my child theme’s style.css using the .sc_title element but that overwrites all titles on the website. And I just want to customize the shop’s header (so that’s in white, not in blue). So my search probably isn’t specific enough. What element should I target?

Hopefully somebody can help me with this. Thanks in advance.

The div container has an inline element.style of display: none and I can’t figure out how or where to remove it. I’ve been skimming code, but having poor knowledge about php means I might as well be blind. I’ve tried adding code to the CSS but it keeps getting overridden by the HTML element.style.

This is all very frustrating, and any help would be greatly appreciated.

Thanks in advance!