Image not appearing well after CSS modifications

on the footer section the image is not showing correctly, 1/3 is missing, this must occurred since I made the header dissapear from those pages and perhaps it has to do with the padding? i tried to change some numbers via firebug, but did not find anything what would solve this… can you please give me a hint what to change to give the image more space to appear well?

Thanks!

On the same page you see also the product code appearing as a “title” …what CSS can I place so this title appears smaller, and is there a way to input a second title above this one? So you could use a product NAME and below a product CODE

( there is a nice plug in which produces subtitle, but I want it to appear above, not sub :slight_smile: )

Your questions are quite hard to understand, so I’d recommend you be more specific about what footer problem you’re talking about and what title you’re referring to.

I don’t see any obvious “1/3 image” either. Maybe a screen capture and the original for comparison would be easiest?

As for “title”, if you are talking about the <title> tag in the <head> then I’m afraid you’re out of luck. That is the realm of the browser chrome and “belongs” more to the user than the website. You can specify what content it contains - as a text string but it won’t take HTML or CSS.

If you are talking about

<header class="entry-header">
  <h1 class="entry-title">Κωδικός: 01.01.001</h1>
</header>

then sure, you can style it and/or modify the mark-up to your liking.

1 Like

I am sorry that I dont get understood so well…

Mittineague you got me most,… yes thats what I talk about…

<header class="entry-header">
  <h1 class="entry-title">Κωδικός: 01.01.001</h1>
</header>

could you please write me the exact CSS to input to make it appear smaller? is there a way using CSS to make a second tile appear above? EXAMPLE “Lamp with leaves” and below of that 01.01.001

the 1/3 Image, on Firefox it appears not complete… the complete image is this one…

After clicking around in dev tools inspect a bit, it looks like it’s footer doing it.

It seems it’s meant to hold content even though it’s currently empty, So messing with it might not be the best idea if it might get content at some point. It would be a good idea to put comments in the code for future reference.

If you simply want the h1 text smaller, something like

h1.entry-title {
 font-size: 0.8em;
}

would work. I can’t give “exact” because how you want it to look is up to you. You may like it to be smaller still.

As for getting it to be two lines one above the other, the easy way would be to put a <br> between the two.
Because this is WordPress, I’m assuming the text is being inserted as a whole and doing that might not be so easy. Maybe narrowing the width to force a wrap would work well enough?

Thanks a lot!

the sample does it for me, great !

well if the footer is causing it… does it get re positioned somehow… in the CMS back end, if i even try to put the image a it higher…it wont do… this all got messed up when i exclude the header from this pages via CSS … I really dont know how to fix that :frowning:

yea
would do maybe if it would be a sigle page… I have to modify to many… but I guess there is no other option.

Thanks again !

The site is using the Oblique theme
https://wordpress.org/themes/oblique/

The way WordPress works is by using templates - of which this theme has a dozen or so.

So you should be able to create a child theme that has a tweaked version of a template and not need to change “many pages”.

A problem is that the theme uses bootstrap. From what I’ve seen here in others posts, bootstrap is good when you adhere to its conventions but can cause pain when trying to customize it.

The web page has for each product its own page, and the products are many, we could do a lot in the beginning, create a child theme as you said etc, the thing is, what now? making a child theme and save it as a new template you mean? will this adjust the rest?

Hi,
I figured out that something changed the size of the img, that could be an update for example since its not a child theme… (yet)
I see there’s a class for that image… can me a CSS friend help me out here to make attributes for the specific image ?

what we got here is…

a href="http://bronzelights.gr/content/?page_id=325"><img class="aligncenter wp-image-693" src="http://bronzelights.gr/content/wp-content/uploads/2017/01/colorful-next-step-arrow-icon-vectors.jpg" width="55" height="53" /></a

if that helps… all I want is just to change this “55” and “53” …but for all page id’s

Thanks !!!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.