Hello Mike,

As always THANK YOU very much for your help. That worked perfectly.
It took me some time to respond because I was trying to fix two things myself but after trying a bunch of things I’m giving up, I couldn’t figure out what classes to target without damaging other areas.

So in the same section that we just made the change, you will notice that the two columns have a light grey background, I believe the background shouldn’t be in the column but instead it should be the background color of the login and register form. I added two images to the same folder I have shared with you so you can see what I mean. Img_8 and Img_9 shows the light grey, and I changed the color (Img_9) so you can see it better. what I would like to do is to have that background color for the forms only and not the columns. Thank you.

MOBILE: Also after fixing the issue #1, where I mentioned that I was having a zoom affect in the mobile browser, after research I found out that if the mobile browser thinks that your font is too small it will create that effect when selecting or typing information. So I was able to fix Issue #1 with:
/*increase text size on drop down text – avoid apple to zoom text*/
#top select {
font-size: 16px;}

Now in the store side, I couldn’t figure out what classes to target to increase the size in the input text of the apply coupon and on the fillable fields in the check out page information. Images Img_10 and Img_11 shows the sections. So what I would like to do is to increase the size of the input text fields in mobile so I don’t get that effect every time someone needs to type their information. Your help will be very appreciated. If we get this two things fixed that site will look perfect and the user experience will be great.

If you have any questions do not hesitate to contact me.

Thanks Rikard. I added that code and added a field to change the font size but neither the padding or the font size update. The rest have changed (font colour and background colour). This is the code I used:

/*masonry titles:*/
.av-inner-masonry-content-pos-content .avia-arrow {display: none; }
.av-masonry-container .portfolio .av-inner-masonry-content { background: #000000 !important; }
.av-masonry-entry-title.entry-title { font-size: 10px !important; color: #fff !important; }
.figcaption.av-inner-masonry-content { padding: 30px !important; }

This is in the style.css file. Please can you help….

Hi Guenni007,

thanks so much for your reply, this has solved my problem! The formatting on the site you linked to is very close to what I was looking for actually, so very useful to see how you achieved it.

For reference, I used Guenni007’s script to wrap the excerpt text in it’s own div, used some padding-bottom to prevent overlap of the text and the button, and set the button position to absolute, then styled the link:

#top .avia-content-slider .slide-entry-excerpt {
	padding-bottom: 50px;
}
#top .avia-content-slider .read-more-link {
    position: absolute;
    bottom: 20px;
    width: calc(100% - 40px);
}
#top .avia-content-slider .read-more-link a { 
	background-color:#5584ab;
	display:block;
	padding: 4px 10px;
	border-radius: 9px;
	font-size:15px;
	text-align: center;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	width: 100%;
}

Thanks again!

This worked but since I’m assuming the product titles are H2’s, all my other H2’s were also shrunk down to size 15px.

Is there a way that just the product H2’s change font size and NOT The other body paragraph H2’s?

I tried the following, but it didn’t work…

div.container.av-logo-container h1 {
    font-size: 32px;
}

Thank you that has solved half the issues. This has changed the background colour and removed the arrow but the the font is still not working. Its not changed size and its the wrong colour. Please can you let me know what more I need to do. Thanks