How to adjust image size and border shape on blog and contact us page?

[ambientcandle19]

I have read the entire forum looking to see if this has already been answered. I could find it for craft.

They should be tiny edits.

1. For the blog post when you open the blog to read it. The image is way too big. Id like for it to be in line with the text underneath.

2. Also for the contact us page. how do i make it so that the border is square and not rounded.

[Liquid_xPert_SJ]

@ambientcandle19 welcome to the Shopify Community,

I can help you in this please share the store url OR any screenshot, so that i can look into it and give you the solution.

thanks

[ambientcandle19]

The screenshots are attached. I think it should be quick. For the blog. Just to make it so that it doesn’t take up the whole screen. make it fit with the text and be a good size? and for the contact us page just fix the border so its square. I usually do it in theme edit but i couldn’t find the section. I looked and looked before I asked.

[Liquid_xPert_SJ]

@ambientcandle19

i dont see any screenshot attached can you please share the theme name? you are using?

[ambientcandle19]

I updated the file i can attach here as well

[Liquid_xPert_SJ]

@ambientcandle19

if you are using dawn theme then place below CSS code into your base.css file at the end

Online Store >Theme files > Assets > base.css

.card.article-card.card--media {
	max-width: 800px;
	width: 100%;
	margin: 0px auto;
}

#ContactForm .field::before, #ContactForm .field::after {
	display: none;
}
#ContactForm input, #ContactForm textarea, #ContactForm button {
	border-radius: 0;
}

Thanks

[ambientcandle19]

I am using the craft theme does it change anything??

[Liquid_xPert_SJ]

then you have to provide me the store URL

[ambientcandle19]

lastcandles.myshopify.com

it is the contact us page and blog.

Also if you look at the contact us page the header is also so big. It made all the headers specifically on pages much larger than everything else. So strange…

[Liquid_xPert_SJ]

#ContactForm input, #ContactForm textarea {
	border: 1px solid #000;
	border-radius: 0px !important;
}
#ContactForm .field:before,
#ContactForm .field:after {
	display:none
}
.article-template__hero-container {
	max-width: 720px;
	width: 100%;
	margin: 0px auto;
}

please update this code into the base.css file as instructions described above.

[ambientcandle19]

Perfect and the blog? The size issue?

[Liquid_xPert_SJ]

the same css will be applied i shared or you can use an important for css like

.article-template__hero-container {
	max-width: 720px !important;
}

please mark as accept as solution must if your issue has been resolve

thanks

[ambientcandle19]

the second one works perfect. thanks ill make as solved. Can i go ahead and delete this then or leave it.

} .article-template__hero-container { max-width: 720px; width: 100%; margin: 0px auto; }

[ambientcandle19]

Your the best btw im waiting on one more answer then im done and i can move on to my next phase. thanks so so much for getting back to me. truly appreciate it

[Liquid_xPert_SJ]

yes please replace the second code with the first one for the blog

.article-template__hero-container { max-width: 720px; width: 100%; margin: 0px auto; }

thanks

[Liquid_xPert_SJ]

thanks you